JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<form>
  <input type="email" placeholder="email" id="before" required>
  <label for="before">&nbsp;</label>
</form>

CSS

#before {
  padding: .6em 2.6em .6em .3em;
  vertical-align: middle;
}

#before[required] + label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#before[required] + label:before {
  content: "\2709";
  position: absolute;
  left: -1.2em;
  font-size: 23px;
  color: rgb(238, 238, 238);
}

#before[required]:hover + label:before,
#before[required]:focus + label:before {
  color: rgb(220, 200, 200);
}

#before[required]:not(:focus):not(:hover):valid {
  opacity: .4;
}

#before[required]:not(:focus):valid + label:before {
  content: "\2714";
  color: green;
}