JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<h1> &lt;input type="date"/></h1>
<input type="date" />
<hr />
<h1> &lt;input type="date"/> with a <code>datalist</code></h1>
<input type="date" list="days">
<datalist id="days">
    <option label="Something">1980-08-26</option>
    <option label="Apollo 11 Moon Landing">1969-07-20</option>
    <option label="DDay">1944-06-06</option>
</datalist>
    <hr />
    <p>Original article in CSS-Tricks.com here: <a href="http://css-tricks.com/datalists-different-input-types/#comment-1586270">Datalists for Different Input Types</a></p>

CSS

input {
    padding:5px;
    font:italic 18px Georgia, Times, Baskerville, Georgia, serif;
}
datalist, option {
    background:red;
    font:italic 18px Georgia, Times, Baskerville, Georgia, serif;
}