JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<h2>Customer Name </h2>
<fieldset>
    <legend>Customer Name</legend>
<p>
    <label>UAN</label><span>*</span>
    <input class="fullW" type="text" />
</p>
<p>
    <label>Name First/Last</label>
    <input class="fullW" type="text" />
</p>
<p>
    <label>UAN</label>
    <input class="fullW" type="text" />
</p>
</fieldset>

<fieldset>
    <legend>Customer Name</legend>    
<p>
    <label>Street<span>*</span></label>
    <input class="fullW" type="text" />
</p>
<p>
    <label>City</label>
    <input class="mediumW" type="text" />
    <label class="mediumW">State</label>
    <select class="smallW">
        <option>MA</option>
        <option>TX</option>
    </select>
    <label class="mediumW">Zip</label>
    <input class="mediumW" type="text" />
</p>
<p>
    <label>UAN</label>
    <input class="fullW" type="text" />
</p>
</fieldset>

CSS

body {font-family:arial;}
h2 {background-color:blue; color:red;font-weight:bold; text-align:center;}
fieldset {border:1px solid green; width:650px;margin-top:30px; float:left; clear:both;}
legend {background-color:red; width:300px;}
p {margin:10px 0 0; background-color:#eaeaea; float:left; width:100%;}
label {margin-left:10px; width:120px; float:left; border:0px solid red;}
input, select {float:left;}
.fullW {width:285px;}
.mediumW {width:52px;}
.smallW {width:50px;}