JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<!DOCTYPE html>
 <html lang="en">

   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- This jquery.min.js is necessary for popup to Print Modal -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     <!-- This For Phone Mask -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

     <!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

     <!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pwstrength-bootstrap/3.0.9/pwstrength-bootstrap.js"></script>
     
     <script src="/path/to/password-score-options.js"></script>
     <script src="/path/to/bootstrap-strength-meter.js"></script>

   </head>

   <body>

    <div class="form-group">
					<div class="col-md-4"> 
						<label class="control-label">Your password:</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
							</span>
							<input id="password1" class="form-control" type="password" id="example-progress">
              <div id="progress-container"></div>
             
						</div>
					</div>
					<div class="col-md-4"> 
						<label class="control-label">Confirm password:</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon...

JavaScript

$(document).ready(function() {
  $('#example-progress').strengthMeter('progressBar', {
    container: $('#progress-container')
    base: 80,
    hierarchy: {
      '0': 'progress-bar-danger',
      '25': 'progress-bar-warning',
      '50': 'progress-bar-success'
    },
    passwordScore: {
      options: [],
      append: true
    }
  });
});