JSFiddle - React, Tailwind, and code Playground

by Vo Tai Tri

HTML

<input type=text placeholder='placeholder text'><br>
<input type=text placeholder='placeholder text'><br>
<input type=text placeholder='placeholder text'><br>
 
<br> Filled: <b id=filledInputCount></b>
<br> Empty: <b id=emptyInputCount></b>

CSS

body{
  counter-reset: filledInputCount, emptyInputCount;
}
input[type='text']{
  counter-increment: filledInputCount;
}
input[type='text']:placeholder-shown{
  counter-increment: emptyInputCount;
}
#filledInputCount::before{
  content: counter(filledInputCount);
}
#emptyInputCount::before{
  content: counter(emptyInputCount);
}
b{
  color: red;
}