JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<input type="time" list="times" />
<datalist id="times">
    <option label="breakfast">09:00</option>
    <option label="lunch">12:00</option>
    <option label="dinner">18:00</option>
</datalist>


<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option> 
  <option value="Orange"></option> 
  <option value="Peach"></option> 
</datalist>


<input type="range" value="0" min="0" max="100" list="number" />
<datalist id="number">
  <option>10</option> 
  <option>15</option> 
  <option>30</option> 
  <option>50</option> 
  <option>90</option> 
</datalist>


<input type="color" value="#000000" list="color" />
<datalist id="color">
  <option>#ff0000</option> 
  <option>#0000ff</option> 
  <option>#00ff00</option> 
  <option>#ffff00</option> 
  <option>#00ffff</option> 
</datalist>


<input type="date" list="days" />
<datalist id="days">
  <option label="Independence Day">2013-07-04</option>
  <option label="Labor Day">2013-09-02</option>
  <option label="Colombus Day">2013-10-14</option>
</datalist>