Coder Wrap provides free to use snippets

/**Typeo CSS Start**/	
	@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
	* {
	 box-sizing: border-box;
	}
	body {
	 background-color: #d2dbd2;
	 margin: 0px;
	  font-family: "Poppins", sans-serif;
	}
	.h2-heading {
		text-align: center;
		margin: 50px 0px 0px 0px;
	}
	.desc {
		max-width: 800px;
		margin: auto;
	}
	.js-pass-showhide {
			max-width: 400px;
			width: 100%;
			margin: 20px auto;
		}

/**Typeo CSS End**/
		
.form-group {
	position: relative;
	width: 100%;
	margin: 10px 0px;
}
.input-form{
	 font-family: "Poppins", sans-serif;
	 height: 50px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .25);
  color: #000;
  font-size: 16px;
  padding: 0 40px 0 15px;
  width: 100%;
  outline: none;
  border-radius: 8px;
}
.pass-showhide {
	position: absolute;
	right: 10px;
	top: 50%;
	cursor: pointer;
	transform: translateY(-50%);
}

const passFields = document.querySelectorAll('.js-pass-showhide .input-form');
 passFields.forEach((field) => {
  const showHideBtn = field.parentElement.querySelector('.pass-showhide');
  showHideBtn.addEventListener('click', function(e) {
   const hideshow = e.target.textContent;
   if (hideshow == "Show") {
    e.target.textContent = "Hide";
    field.setAttribute('type', 'text');
   } else {
      e.target.textContent = "Show";
      field.setAttribute('type', 'password');
   }
  });
 });