JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="form-wrapper">
  <div class="wrap-field">
    <input type="password" placeholder="New password" id="newPassword" class="input">
    <span class="text" onClick="togglePassword('newPassword')">show</span>
  </div>
  <div class="wrap-field">
    <input type="password" placeholder="Confirm new password" id="confirmNewPassword" class="input">
    <span class="text" onClick="togglePassword('confirmNewPassword')">show</span>
  </div>
</div>

SCSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.form-wrapper {
  max-width: 400px;
  margin: auto;
  padding: 50px 0;

  .wrap-field {
    position: relative;
    margin-bottom: 15px;
    .text{
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
    .input {
      height: 40px;
      width: 100%;
      border: solid 1px #ccc;
      padding: 10px;
    }
  }
}

JavaScript

var passwordVisible;
  function togglePassword(field) {
  alert();
    var element = document.getElementById(field);
    if (element.type === "password") {
      element.type = "text";
      passwordVisible = true;
    } else {
      element.type = "password";
      passwordVisible = false;
    }
  }