JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="mailpost" name="mailpost" required pattern="^(?!.*([.-])\1)(?!.*([.-])$)(?!.*[.-]$)(?!.*[.-]{2})[a-zA-Z0-9_%+-][a-zA-Z0-9._%+-]*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">

<br/>
Ajout d'antislash avant les tirets : 
<input type="text" id="mailpost_2" name="mailpost" required pattern="^(?!.*([.\-])\1)(?!.*([.\-])$)(?!.*[.\-]$)(?!.*[.\-]{2})[a-zA-Z0-9_%+\-][a-zA-Z0-9._%+\-]*@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$">

<br/>
Juste avec type email : 
<input type="email" id="mailpost_3" name="mailpost" required>

CSS

input:valid {
      background-color: palegreen;
    }
    input:invalid {
      background-color: orangered;
    }