JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.0.8/hideShowPassword.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div id="wrapper">
  <div class="form-group has-feedback">
    <input type="password" class="form-control" id="password" placeholder="Password">
    <i class="glyphicon glyphicon-eye-open form-control-feedback both"></i>
  </div>
</div>

<div class="container"><div id="left" class="left-div left-text">service portal, servicenow, TESTING testing.service portal, servicenow, TESTING testing.service portal, servicenow, TESTING testing.service portal, servicenow, TESTING testing.service portal, servicenow, TESTING testing.<a href="https://sdev2.sharepoint.com/:x:/r/_layouts/15/WopiFrame.aspx?sourcedoc=%7BF5CBC55F-C6F0-4751-98AB-31F9162F29CD%7D&file=clauses.xlsx&action=embedview" target="iframe3">Link</a></div>

<div id="target" class="right-div right-text" >  <iframe name="iframe3" height="500px" width="500px" src="https://jsfiddle.net/_jordan/UecUn/show/"></iframe></div>
</div>

CSS

#password + .glyphicon {
   cursor: pointer;
   pointer-events: all;
 }

/* Styles for CodePen Demo Only */
#wrapper {
  max-width: 500px;
  margin: auto;
  padding-top: 25vh;
}
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body
{
  background-color: #fcfcfc;
}
.container
{
  text-align: center;
  padding: 15px;  
}
.left-div
{
  display: inline-block;
  max-width: 300px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
  vertical-align: top;
}
.right-div
{
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
}
.left-text, .right-text
{
  font: 14px 'Source Code Pro', monospace;
	color: #333;
}
@media screen and (max-width: 600px) 
{
  .left-div, .right-div
    {
       max-width: 100%;
    }
}

JavaScript

$('.both').click(function() {
    $('#target').toggle('slow');
});

// toggle password visibility
$('#password + .glyphicon').on('click', function() {
  $(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
  $('#password').togglePassword(); // activate the hideShowPassword plugin
  
});
$("input").hide();