JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="password-container">
    <input type="password" id="password" placeholder="Enter password" value="test">
    <button type="button" class="toggle-btn" onclick="togglePassword()">👁️</button>
</div>

CSS

.password-container {
  display: flex;
  align-items: center;
}
.password-container input {
  padding-right: 30px;
}
.toggle-btn {
  margin-left: -30px;
  cursor: pointer;
  background: none;
  border: none;
}

JavaScript

function togglePassword() {
  const passwordField = document.getElementById("password");
  passwordField.type = passwordField.type === "password" ? "text" : "password";
}