JSFiddle - React, Tailwind, and code Playground

Form

by Jennifer Perrin

HTML

<div class="dataentry">

<div class="form">
<div id="firstName" style="width:100%">
    
    <label for="txtFirstName">First Name</label>
    <input name="ctl01$txtFirstName" type="text" maxlength="60" id="ctl01_txtFirstName" class="text" />
</div>
<div id="lastName" style="width:100%">
    
    <label for="txtLastName">Last Name</label>
    <input name="ctl01$txtLastName" type="text" maxlength="60" id="ctl01_txtLastName" class="text" />
</div>
<div id="confirmEmail" style="width:100%">
    
    
    <label for="txtEmail">Email</label>
    <input name="ctl01$txtEmail" type="text" maxlength="255" id="ctl01_txtEmail" class="text long" />
</div>
<div id="zipCode" style="width:75%">
    
    
    <label for="txtPrimaryPhone">Phone</label>
    <input name="ctl01$txtPrimaryPhone" type="text" maxlength="14" id="ctl01_txtPrimaryPhone" class="text" />                        
</div>
<div id="ext" style="width:25%">
    
    <label for="txtPhoneExtension">Ext.&nbsp;(OPT)</label>
    <input name="ctl01$txtPhoneExtension" type="text" maxlength="4" id="ctl01_txtPhoneExtension" class="text ext" />
</div>
<div id="comments_long" style="width:100%">
    <label for="txtComments">Comments</label>
    <textarea name="ctl01$txtComments" rows="2" cols="20" id="ctl01_txtComments" class="text"></textarea>
</div>

<br clear="left" />
</div>

CSS

body { font-family: verdana; margin: 0;background: #e3e3df; font-size: 12px; line-height: 16px; color: #333;}
ul, form, h1, h2, h3 { margin: 0; list-style-type: none;}
p { margin: 0 0 12px 0; line-height: 140%;}
a { outline: none; outline-style: none; outline-width: 0;}

form input { outline: none;}

div.dataentry { padding: 10px 21px 21px 21px; background: #f2f2f2; margin-bottom: 16px; position: relative; border: 1px solid #eee; overflow: hidden;}

div.dataentry div.form {width: 324px; margin: 4px auto 10px auto; padding: 5px; background: #dfdfdf; border: 1px solid #fff; clear: both; position: relative;}
div.dataentry a {color: #66a000;}
div.dataentry a:hover {color: #367000;}
div.dataentry div.form div {width: 100%; padding-left: 0; font-size: 14px;  overflow: hidden; font-family: courier; color: #999; padding: 0; position: relative; float: left; margin-bottom: 1px; background: #fff url('https://www3.carmax.com/content/images/pixel_left.gif') top left repeat-y; }
div.dataentry div.form div.focus {background-color: #e2ffaa;}
div.form label { position: absolute; z-index: 10; top: 3px; left: 5px; font-family: arial; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; font-size: 9px;}
div.form label b, p.req b { font-size: 11px; font-family: verdana; font-weight: normal; color: #d77 !important; }
div.form label b { margin: 0; position: absolute; top: -3px; right: -10px; }
div.form select {border: 1px solid #eee; font-size: 14px; font-family: courier; margin-top: 16px; margin-left: 20px; margin-bottom: 6px;}
div.form label a { position: absolute; right: -14px; background: #bbb; display: block; padding: 0px 2px 0px 2px; top: -1px; text-decoration: none; color: #fff !important;}
div.form label a:hover { background: #76ae0e;}
div.form input {border: 0; font-size: 14px; font-family: courier; width: 100%; margin: 0; padding: 19px 0 7px 20px; position: relative; background: none;}
div.form input.appraisal_checkbox { left: 0;}
div.form .email_button input...