JSFiddle - React, Tailwind, and code Playground

by Ian Oxley

HTML

<form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name (required):</label>
            <input type="text" id="name" name="name" value="" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email (required):</label>
            <input type="text" id="email" name="email" value="">
        </div>
        <div>
            <label>Website:</label>
            <input type="text" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets (required):</label>
            <input type="text" id="numTickets" name="numTickets" value="">
        </div>
        <div class="submit">
            <input type="submit" value="Submit">
        </div>
    </fieldset>
</form>

CSS

body {
    font-family: Helvetica, Arial;
    font-size:12px;
}
h1 {
    font-size:200%;
}
fieldset {
    border:1px solid #ccc;
    padding:10px;
}
legend {
    padding:0 5px;
    text-align:right;
}
fieldset > div {
    margin:0 0 10px;
}
label {
    display:inline-block;
    width:170px;
}
input {
    width:200px;
}
input[type="submit"] {
    width:auto;
}
.help {
    display:none;
    font-size:90%;
}
input:focus + .help {
    display:inline-block;
}
div.submit {
    margin-left:170px;
}