JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<div class="field">
  <input type="password" name="password" id="password">
  <i class="glyphicon glyphicon-eye-open"></i>
</div>
ببببب

CSS

.field {
  width: 300px;
  position: relative;
  margin: 20px;
}

.field input {
  width: 100%;
  line-height: 40px;
  text-indent: 10px;
}

.field .glyphicon {
  position: absolute;
  right: 10px;
  top: 11px;
  font-size: 20px;
  color: #1c90f3;
  cursor: pointer;
}

.field .glyphicon.active {
  color: #ccc;
}

JavaScript

$(function() {
  $('.field .glyphicon').on('click', function() {
    var attr = ($(this).prev().attr('type') == 'password') ? 'text' : 'password';
    $(this).prev().attr('type', attr);
    $(this).toggleClass('active');
  });
});