JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <form id="ContactForm" method="post" action="#">
    <fieldset>
      <div class="element">
        <input type="text" name="nom" id="nom" placeholder="Prénom / Nom *" pattern="[a-zA-ZÀ-ÿ]{2,}(\s)[a-zA-ZÀ-ÿ]{2,}" required title="Saisissez votre prénom et votre nom contenant au moins 2 lettres chacun">
      </div>
      <div class="element">
        <input type="text" name="societe" id="societe" placeholder="Société *" pattern="[a-zA-ZÀ-ÿ0-9\s]{2,}" required title="Saisissez au minimum 2 caractères">
      </div>
      <div class="element">
        <input type="text" name="code_postal" id="code_postal" placeholder="Code postal *" pattern="[0-9]{5}" required title="Saisissez un code postal à 5 chiffres">
      </div>
      <div class="element">
        <input type="email" name="email" id="email" placeholder="Email *" pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" required title="Saisissez un email valide">
      </div>
      <div class="element">
        <input type="text" name="password" id="password" placeholder="Mot de passe *" pattern="[a-zA-Z0-9]{5,10}" required title="Saisissez un mot de passe de 5 à 10 caractères sans espace et sans accent">
      </div>
      <div class="element">
        <input class="submit" type="submit" value="Envoyer" />
        <p class="OBLIG">* Champs obligatoires</p>
      </div>
    </fieldset>
  </form>
</div>

CSS

.content {
  background-color: #002725;
  color: #FFF;
  padding: 48px;
}

form {
  margin: 0 auto;
  width: 420px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

fieldset .element {
  margin: 0 0 12px 0;
  float: left;
  width: 100%;
}

input {
  margin: 0;
  padding: 10px;
  width: 398px;
  color: #58595b;
  background-color: #ededed;
  border: 1px solid #00736a;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  line-height: 26px;
  float: left;
  outline: none;
  font-size: 18px;
}

p.OBLIG {
  margin: 0 0 0 12px;
  float: left;
  line-height: 14px;
  font-size: 14px;
}

input[type=submit] {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #002725;
  text-indent: 0px;
  display: block;
  color: #FFF;
  font-size: 24px;
  line-height: 45px;
  width: 50%;
  text-decoration: none;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 1px solid #00736a;
  text-transform: uppercase;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

input[type=submit]:hover {
  background-color: #00736a;
}

::-webkit-input-placeholder {
  color: #7c7d80;
}

:-moz-placeholder {
  color: #7c7d80;
}

::-moz-placeholder {
  color: #7c7d80;
}

:-ms-input-placeholder {
  color: #7c7d80;
}

input:required {
  box-shadow: none;
}

input:required:focus {
  border: 1px solid #FFF;
  outline: none;
}

input:required:hover {
  border: 1px solid #FFF;
  background-color: #FFF;
}

input:required:valid {
  border: 1px solid #ccffd3;
  background-color: #ccffd3;
  background-image: url(http://i.imgur.com/pvThwYA.png);
  background-repeat: no-repeat;
  background-position: 382px center;
}

input:required:focus:invalid {
  border: 1px solid #ffcccc;
  background-color: #ffcccc;
  background-image: url(http://i.imgur.com/swR7zH0.png);
  background-repeat: no-repeat;
  background-position:...