JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<form id='targets' action='http://www.innovativephp.com' method='post'  >
    <ul>
        <li ><div class='label_col'>Name</div><div class='field'><input type='text' name='test_field' id='name' /></div></li>
        <li class='error_msg' >
        <div class='label_col'> </div><div class='error_field' id='name_error_msg'> </div>
        </li>
        <li ><div class='label_col'>Country</div><div class='field'>
                <select name='test_field'  id='country' >
                    <option value='0'>Select</option>
                    <option value='LK'>Sri Lanka</option>
                    <option value='IN'>India</option>
                    <option value='UK'>United Kingdom</option>
                </select></div>
        </li>
        <li class='error_msg' >
            <div class='label_col'> </div><div class='error_field' id='country_error_msg'> </div>
        </li>
        <li ><div class='label_col'>Comment</div><div class='field'><textarea name='test_field'  id='comment' ></textarea></div>
        <li class='error_msg' >
        <div class='label_col'> </div><div class='error_field' id='comment_error_msg'> </div>
        </li>
                    <li ><div class='label_col'> </div><div class='field'><input type='checkbox' name='test_field'  id='checkboxid' />I Agree to Terms of Use</div>
        <li class='error_msg' >
        <div class='label_col'> </div><div class='error_field' id='checkboxid_error_msg'> </div>
        </li>
                        <li><div class='label_col'> </div><div class='field'><input type='submit' value='Save' /></div></li>
    </ul>
</form>

CSS

.label_col{
     width:20%;
      padding:5px;
    float:left;
}
.field{
    width:75%;
      padding:5px;
     float:left;
}
.error_field{
     width:75%;
      padding:5px;
     float:left;
}
.error_msg{
    display:none;
     clear:both;
       color:#f00;
}
li{
        width:100%;
        float:left;
}

input:focus{
 background-color:#cfcfcf;   
}
textarea:focus{
 background-color:#cfcfcf;     
}