JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<div class="form-style-3">
<form>
<fieldset><legend>Personal</legend>
<label for="field1"><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
<label for="field2"><span>Email <span class="required">*</span></span><input type="email" class="input-field" name="field2" value="" /></label>
<label for="field3"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="field3" value="" /></label>
<label for="field4"><span>Subject</span><select name="field4" class="select-field">
<option value="Appointment">Appointment</option>
<option value="Interview">Interview</option>
<option value="Regarding a post">Regarding a post</option>
</select></label>
</fieldset>
<fieldset><legend>Message</legend>
<label for="field6"><span>Message <span class="required">*</span></span><textarea name="field6" class="textarea-field"></textarea></label>
<label><span>&nbsp;</span><input type="submit" value="Submit" /></label>
</fieldset>
</form>
</div>

CSS

.form-style-3{
    max-width: 450px !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
.form-style-3 label{
    display:block !important;
    margin-bottom: 10px !important;
}
.form-style-3 label > span{
    float: left !important;
    width: 100px !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-shadow: 1px 1px 1px #fff !important;
}
.form-style-3 fieldset{
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    margin: 0px 0px 10px 0px !important;
    border: 1px solid #000000 !important;
    padding: 20px !important;
    background: #93cede !important; /* Old browsers */
    background: -moz-linear-gradient(top,  #93cede 0%, #75bdd1 41%, #49a5bf 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #93cede 0%,#75bdd1 41%,#49a5bf 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ) !important; /* IE6-9 */

}
.form-style-3 fieldset legend{
    color: #a70000 !important;
    border-top: 1px solid #000000 !important;
    border-left: 1px solid #000000 !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 5px 5px 0px 0px !important;
    -webkit-border-radius: 5px 5px 0px 0px !important;
    -moz-border-radius: 5px 5px 0px 0px !important;
    background: #FFF4F4 !important;
    padding: 0px 8px 3px 8px !important;
    font-weight: normal !important;
    font-size: 12px !important;
}
.form-style-3 textarea{
    width:250px !important;
    height:100px !important;
}
.form-style-3 input[type=text],
.form-style-3...