JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<section>
  <input type="password">
  <div>
    <span class="red"></span>
    <span class="red"></span>
    <span class="amber"></span>
    <span class="amber"></span>
    <span class="green"></span>
    <span class="green"></span>
  </div>
</section>

CSS

section {
  width: 200px;
  padding: 50px;
}

div {
  display: flex;
  padding-top: 10px;
}

input {
  width: 96%;
}

span {
  width: 50px;
  height: 4px;
  background: lightgray;
  margin: 0 2px;
}

span:first-child {
  margin: 0 2px 0 0;
}

span:last-child {
  margin: 0 0 0 2px;
}

span:nth-child(1),
span:nth-child(2),
span:nth-child(3),
span:nth-child(4){
  background: orange;
}