JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>

<body>

  <div class="row row-senha validar-senha">
                Senha <input required tabindex="3" id="senha" type="password" name="password" minlength="6" data-toggle="popover" data-trigger="focus" data-popover-content="#senha-popover">
              </div>

  <div id="senha-popover" class="hidden">
        <div class="popover-body">
          <span class="8char"><i id="8char" class="fas fa-times-circle"></i> 8 Caracteres<br></span>
          <i class="fas fa-times-circle"></i> Letra Maiúscula<br>
          <i class="fas fa-times-circle"></i> Número
        </div>
  </div> 

</body>

CSS

body {
  padding: 20px;
}

.hidden {
    display: none;
}

.popover-body {
    color: #EA2027;  
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
}

.popover-body {
    color: #EA2027;  
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
}

JavaScript

$(document).ready(function () {
    //SCRIPT DO POPOVER DA SENHA
		$('[data-toggle=popover]').popover({
			html: true,
			content: function() {
	            var content = $(this).attr("data-popover-content");
	            return $(content).children(".popover-body").html();
	        }, 
			trigger: "focus", 
			placement: "bottom"
		});

		$( "#senha" ).on("keyup focus",function() {
		    if ($('#senha').val().length < 8){
		    	$(".8char").css("color","#EA2027");
		    	$("#8char").removeClass("fa-check-circle");
					$("#8char").addClass("fa-times-circle");

		    } else {
		    	$(".8char").css("color","#009432");
		    	$("#8char").removeClass("fa-times-circle");
					$("#8char").addClass("fa-check-circle");
		    }
		});
});