JSFiddle - React, Tailwind, and code Playground

by robx

HTML

<form>
    <fieldset>
        <legend>Contact Form</legend>
        <label for="name">Name: Required</label>
        <input type="text" name="name"id="name" />
        <div class="error">Err</div>
        
        <label for="email">E-Mail: Required</label>
        <input type="text" name="email"id="email" />
        <div class="error">Err</div>
        
        <label for="phone">Phone: Required</label>
        <input type="text" name="phone"id="phone" />
        <div class="error">Err</div>
        
        <label id="msg" for="message">Message: Required</label>
        <textarea name="message" rows="8" cols="40"></textarea>
        <div class="error">Err</div>
        
        <input id="btn" type="submit" name="submit" value="Contact" id="submit" />
    </fieldset>
</form>

CSS

*{
    margin:0px;
    padding:0px;  
}
label,input,textarea{
    float:left;
    width:150px;
    margin:5px;
    border:1px solid #000;
}
label{
    background-color:#ccc;
    clear:both; 
    text-align:right;
    border:1px solid #000;
    height:22px; 
    padding-right:5px;
}
input{
    height:22px;   
}
textarea{
    width:300px;
    resize:none; 
}
.error{
    float:left;
    margin:5px;
}
#btn{
    clear:both;
    cursor:pointer; 
}