JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/>
<br/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h2>Password show / hide click</h2>
      <br><br>
      <h5>
      with auth
      </h5>
      <br>

</div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">

        <label class="control-label col-xs-11 col-sm-3" for="email">          <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is a tooltip for this field"></i> Password:</label>
        <div class="col-xs-12 col-sm-8">
          <div class="input-group">
            <input type="password" class="form-control pwd" value="iamapassword">
            <span class="input-group-btn">
            <button class="btn btn-default reveal" title="Show Password" type="button"><i class="fa fa-key"></i></button>
          </span>
          </div>
        <div class="help-block">
        You must use 10 lettters and three special characters
        </div>
 </div>
 
      </div>
    </div>
    </div>   
 </div>
 
 <br/>
<br/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <br><br>
      <h5>
      without auth
      </h5>
      <br>

</div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label class="control-label col-xs-11 col-sm-3" for="email">          <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is a tooltip for this field"></i>  Password:</label>
        <div...

CSS

.has-error .input-group-btn .btn {
    color:white;
    background-color:#a94442;
  }
  .container {
    width:980px;
  }

JavaScript

$(".reveal").on('click', function() {
  var $pwd = $(".pwd");
  if ($pwd.attr('type') === 'password') {
    $pwd.attr('type', 'text');
  } else {
    $pwd.attr('type', 'password');
  }
  
});

  $('[data-toggle="tooltip"]').tooltip({
  container:'body'
  })