JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="date">
<br/>
<input type="range" min="1" max="100" step="10">
<br/>
<input type="color">
<br/>
<input type="name" pattern="^[a-z]+$" required>
<br/>
<input type="email" title="email sbagliata!" required>
<br/>
<input type="tel">
<br/>
<input type="submit">
</form>CSS
input
{-webkit-border-radius:4px;}
input:valid{border:2px solid green;}
input:invalid{border:2px solid red;}