JSFiddle - React, Tailwind, and code Playground

HTML

<input type="email" placeholder="Email" required/><br />
<input type="tel" placeholder="Phone" required/><br />
<input type="url" placeholder="URL" required/><br />
<input type="datetime" placeholder="Datetime" required/><br />
<input type="date" placeholder="date" required/><br />
<input type="month" placeholder="month" required/><br />
<input type="week" placeholder="week" required/><br />
<input type="time" placeholder="time" required/><br />
<input type="datetime-local" placeholder="datetime-local" required/><br />
<input type="number" placeholder="Number" required/><br />
<input type="range" placeholder="range" required/><br />
<input type="color" placeholder="color" required/><br />

CSS

input:invalid {
    background-color: #FFDDDD;
}

input:valid {
    background-color: #EEFFE;
}

/* Other Styles*/
* {
    font-family: "Trebuchet MS";
}
input {
    border: 1px solid #888;
    padding: 3px;
    border-radius: 3px;
    width: 200px;
    margin: 5px;
}
::-webkit-input-placeholder { color:#888; }
::-moz-placeholder { color:#888; } /* firefox 19+ */
:-ms-input-placeholder { color:#888; } /* ie */
input:-moz-placeholder { color:#888; }