JSFiddle - React, Tailwind, and code Playground

by thecoz21

HTML

<form>
    <label for="nome_utente"> Nome Utente<br/>
    <input type="text" name="nome_utente" id="nome_utente" pattern="[a-z]{4,8}" placeholder="eg: Sandro Paganotti" required>
</label>
<label for="email"> Email<br/>
    <input type="email" name="email" id="email" placeholder="eg: [email protected]" title="Inserisci una email valida" required>
</label>
<label for="website"> Www<br/>
    <input type="url" name="website" id="website" title="Inserisci un sito web valido" placeholder="eg: www.sandropaganotti.com">
</label>
<label for="data"> Data preferita per il sopralluogo<br/>
    <input type="date" name="data" id="data">
</label>    
<label for="messaggio"> Messaggio<br/>
    <textarea required name="messaggio" id="messaggio" placeholder="il tuo essaggio"></textarea>
</label> 
<input type="submit" value="invia">
</form>

CSS

label{
    display: block;
    margin-top: 10px;
}

:invalid{
border:3px solid red;}