JSFiddle - React, Tailwind, and code Playground

HTML

<h3>A form with HTML5 input types</h3>

<form action="#">

    <label>Telephone
    <input type="tel" name="tel" id="tel" required>
    </label>

    <label>Email
    <input type="tel" name="tel" id="email" required>
    </label>

    <label>Number
    <input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">
    </label>

    <label>Range 
      <input type="range" min="-100" max="100" value="0" step="10" name="power">
    </label>
             
             <label>Date
                 <input id="dob" name="dob" type="date">
                 </label>
                 
                 <label>Date2
<input id="startdate" name="startdate" min="2012-01-01" max="2013-01-01" type="date">
                     </label>
                     
                     <label>Month
<input id="expiry" name="expiry" type="month" required>
                     </label>       
                     
    <label>Week
        <input id="vacation" name="vacation" type="week">
                     </label>                            

           <label>Time
         <input id="exit-time" name="exit-time" type="time">
                     </label>    
               
             <label>Datetime
        <input id="entry-day-time" name="entry-day-time" type="datetime">
                     </label>  
              <label>Color
                 <input id="color" name="color" type="color">
                     </label>          
</form>

CSS

label{display: block; margin-bottom: 1.2em; }