JSFiddle - React, Tailwind, and code Playground
by Fredy Sudhir
HTML
<form action="" method="post" id="enquiryform">
<fieldset>
<legend>Enquiry Form</legend>
<table cellspacing="3" cellpadding="3" border="1">
<tr>
<td colspan="2">Fields market * are complusory.</td>
</tr>
<tr>
<td><label for="subject">Subject *</label></td>
<td><select name="subject" id="subject" tabindex="1">
<option value="">Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select></td>
</tr>
<tr>
<td><label for="name">Name *</label></td>
<td><input type="text" name="name" id="name" tabindex="2" /></td>
</tr>
<tr>
<td><label for="email">Email *</label></td>
<td><input type="text" name="email" id="email" tabindex="3" /></td>
</tr>
<tr>
<td colspan="2"><label for="message">Message or enquiry below</label></td>
</tr>
<tr>
<td colspan="2"><textarea name="message" id="message"
rows="11" cols="30" tabindex="4"></textarea></td>
</tr>
<tr>
<td><label for="updates">I would like to receive updates: </label></td>
<td><input type="checkbox" name="updates" id="updates" value="n" tabindex="5" /></td>
</tr>
</table>
</fieldset>
<input type=submit value="Send this enquiry" />
</form>
CSS
form {
margin:0;
padding:0;
}
fieldset {
font: normal 12px "Lucida Grande", Verdana, san-serif;
margin:0 0 10px 0;
padding:5px;
border:1px solid #333;
}
legend {
background-color: #DDD;
margin:0;
padding:5px;
border-style:solid;
border-width:1px;
border-color:#FFF #AAA #666 #FFF;
}
#name, #email, #message, #subject {
width:100%;
}
label {
font-weight:bold;
}
input, textarea {
border:3px double #333;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}