JSFiddle - React, Tailwind, and code Playground

by alessia_fachin

HTML

<form>
    <label for="nome"> Nome </label> <br/>
        <input type="text" name="nome" id="nome"  required /> <br/>
    <label for="email"> Email </label> <br/>
        <input type="email" name="email" id="email"  required /> <br/>
    <label for="sito"> Sito Web </label> <br/>
    <input type="url" name="sito" id="sito"  required /> <br/>
<br/>
        <input type="submit" name="submit" id="submit" title="invia"/>
<br/>

</form>
<p></p>

CSS

input {
padding: 7px;
}

form{
counter-reset: errore;
}

input:required:invalid{
counter-increment: errore;
border: 1px solid red;
color: red;
}

p:after{
font-weight: bold;
content: counter(errore) " campi non corretti/mancanti!";
}