JSFiddle - React, Tailwind, and code Playground

by valdeirpsr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-sm-6 wrapper-box">
        <p class="wrapper-box__title text-center">Crie sua conta</p>
        <div>
          <form method="post" class="form form-newaccount" id="passwordForm">
            <div class="form-group">
              <label for="">Nome completo</label>
              <input type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
              <label for="">E-mail</label>
              <input type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
              <label for="">Senha</label>
              <input type="password" class="input-lg form-control" name="password1" id="password1" placeholder="" autocomplete="off">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-newaccount__bullet-steps d-flex flex-row">
                    <div class=" 6char-bg bullet-pass-hor"><span class=""></span></div>
                    <div class=" ucase-bg bullet-pass-hor"><span class=""></span></div>
                    <div class=" num-bg bullet-pass-hor"><span class=""></span></div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <span id="" class="d-block bullet-pass-rounded" style="color:;"><span class="fa fa-circle 6char 6char-text" aria-hidden="true"></span> Pelo menos 6 caracteres</span>
                  <span id="" class="d-block bullet-pass-rounded" style="color:;"><span class="fa fa-circle ucase ucase-text" aria-hidden="true"></span> Pelo menos 1 letra maiúscula</span>
                  <span id="" class="d-block...

CSS

html, body {
  height: 100%;
}

body {
  background-color: #E5E5E5;
}

.wrapper-box {
  background-color: white;
  padding-bottom: 48px;
  padding-top: 60px;
}

.wrapper-box__title {
  color: #312F4F;
  font-size: 22px;
  margin-bottom: 37px;
  padding-top: 24px;
}

.form {
  /* padding: 0 65px; */
}

.form input[type=text],
.form input[type=password] {
  border: 1px solid #B6B9D0;
  border-radius: 0;
  box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.05);
  padding: .57rem .75rem;
}

.form-newaccount label {
  /*font-family: 'Soleil Regular';*/
}

.form-newaccount__bullet-steps {
  margin-bottom: 13px;
  margin-top: 8px;
}

.btn {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.btn-green {
  background-color: #17D499;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: .775rem .75rem;
  width: 100%;
}

.bullet-pass-hor {
  background-color: #EAEAF4;
  border-radius: 10px;
  height: 8px;
  width: 100%;
}

.bullet-pass-rounded {
  color: #696D8C;
  display: inline-block;
  font-size: 16px;
}
.bullet-pass-rounded .fa {
  color: #EAEAF4;
  font-size: 10px;
  height: 16px;
  vertical-align: middle;
  width: 10px;
}

.bullet-pass-hor.active {
  background-color: #1FE6A8
}
}

JavaScript

var steps = $('.bullet-pass-hor');
var index = 0;

function addBullet() {
  steps.eq(index++).addClass("active");
}

function removeBullet() {
	console.log( index );
	index <= 0 ? 0 : index-1;
	steps.eq(index).removeClass("active");
}

$("input[type=password]").keyup(function(){
    var ucase = new RegExp("[A-Z]+");
    var lcase = new RegExp("[a-z]+");
    var num   = new RegExp("[0-9]+");
    
    index = 0;

    if($("#password1").val().length >= 6){
      $(".6char").removeClass("glyphicon-remove");
      $(".6char").addClass("glyphicon-ok");
      $(".6char-text").css({"color": "#1FE6A8" });
      addBullet();
    }else{
      $(".6char").removeClass("glyphicon-ok");
      $(".6char").addClass("glyphicon-remove");
      $(".6char").css("color","#F79682");
    }

    if(ucase.test($("#password1").val())){
      $(".ucase").removeClass("glyphicon-remove");
      $(".ucase").addClass("glyphicon-ok");
      $(".ucase").css("color","#1FE6A8");
      $(".ucase-text").css({"color": "#1FE6A8" });
      addBullet();
    }else{
      $(".ucase").removeClass("glyphicon-ok");
      $(".ucase").addClass("glyphicon-remove");
      $(".ucase").css("color","#F79682");
    }

    if(num.test($("#password1").val())){
      $(".num").removeClass("glyphicon-remove");
      $(".num").addClass("glyphicon-ok");
      $(".num").css("color","#1FE6A8");
      $(".num-text").css({"color": "#1FE6A8" });
      addBullet();
    }else{
      $(".num").removeClass("glyphicon-ok");
      $(".num").addClass("glyphicon-remove");
      $(".num").css("color","#F79682");
    }
    
    removeBullet();
    
  });