JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <label for="pass">Password:</label>
  <input name="pass" v-model="pass" type="text" value="" :value="pass">
  <div class="letter"></div>
</main>

SCSS

@each $l in A B C D E F G H I J K L M N O P Q R S T U V W X Y Z {
  input[type=text][value$="#{$l}" i] + .letter::before {
    content: '#{$l}';
  }
}

input:invalid {
  border: 10px solid red;
}

input[value=""] {
  background: peru;
}

JavaScript

new Vue({
  el: 'main',
  data: {pass: ''},
})