JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <input type="password" v-model="pass">
  <div class="password" v-if="pass" v-text="`Your password is '${pass}'.`"></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: ''},
})