JSFiddle - React, Tailwind, and code Playground

by greenido

HTML

<!-- 
Play with HTML5 fields

Taken from: 
http://ido-green.appspot.com/html5-ChromeOS-9-5-2011/HTML5-CromeOS.html#14

-->
<form>
    <fieldset>
        <label>Required</label>
        <input type="text" required />
        
        <label>Email</label>
        <input type="email" value="some@email.com" />
        
        <label>Date</label>
        <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
        
        <label>Range</label><input type="range" min="0" max="50" value="10" />
        
        <label>Search</label>
        <input type="search" results="10" placeholder="Search..." />
        
        <label>Tel</label>
        <input type="tel"  placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
        
        <label>Color</label>
        <input type="color" placeholder="e.g. #bbbbbb" />
        
        <label>Number Range</label>
        <input type="number" step="1" min="-5" max="10" value="0" />
    </fieldset>
    <button value="Go">Go</button>
    
</form>

CSS

input {
    margin: 5px;
    padding: 3px;
    width: 300px;
}
label {
    cursor: default;
    font-size: 110%
}
button {
    width: 120px;
    height: 35px;
    margin: 5px;
}
form {
    width: 320px;
    background: lightblue;
    padding:9px;
}