<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<form action="/" class="form">
  <img src="https://maxgraph.ru/help-images/leaf.svg" alt="" class="form__image" aria-hidden="true">
  <h2 class="form__title">Hello, world.</h2>
  <div class="form__label">
    <span class="visually-hidden">Username:</span>
    <input type="text" class="form__input form__input--user" placeholder="Username">
  </div>
  <label class="form__label">
    <span class="visually-hidden">Password:</span>
    <input type="password" class="form__input form__input--password" placeholder="Password">
    <button class="form__label-btn pass-btn" aria-label="Toggle password"></button>
  </label>
  <button class="form__btn">Create account</button>
  <button class="form__account">Already have an account? Log in!</button>
</form>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.form {
  position: relative;
  width: 375px;
  height: 667px;
  margin: 50px auto;
  background-color: #f2f3f7;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form__title {
  margin: 20px 0;
  color: #0c152e;
  font-size: 24px;
}

.form__label {
  width: 100%;
  position: relative;
}

.form__input {
  width: 100%;
  height: 60px;
  border: none;
  margin-bottom: 12px;
  background: #F2F3F7;
  box-shadow: inset -5px -5px 30px #FFFFFF, inset 4px 4px 8px rgba(190, 205, 226, 0.5);
  border-radius: 4px;
  padding-left: 56px;
  color: #8c94a0;
  font-size: 12px;
  background-position: 20px center;
  background-repeat: no-repeat;
}

.form__input--user {
  background-image: url("https://maxgraph.ru/help-images/mdi_perm_identity.svg");
}

.form__input--password {
  background-image: url("https://maxgraph.ru/help-images/mdi_lock.svg");
}

.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

.pass-btn {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  cursor: pointer;
  background-color: #F2F3F7;
  box-shadow: -6px -6px 16px #FFFFFF, 6px 6px 16px #BECDE2;
  border-radius: 4px;
  background-image: url("https://maxgraph.ru/help-images/mdi_remove_red_eye.svg");
  background-position: center;
  background-repeat: no-repeat;
}

.form__btn {
  width: 100%;
  height: 60px;
  margin-top: 24px;
  border: none;
  cursor: pointer;
  background: #4070F4;
  box-shadow: 0px 0px 15px rgba(64, 112, 244, 0.5);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  color: #3df0f4;
}

.form__account {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  width: calc(100% - (48px * 2));
  height: 60px;
  border: none;
  background: #EDF0F4;
  box-shadow: -6px -6px 16px #FFFFFF, 6px 6px 16px #BECDE2;
  border-radius: 4px;
  color: #456078;
  font-size: 12px;
  cursor: pointer;
}
const passBtn = document.querySelector('.pass-btn');

passBtn.addEventListener('click', (e) => {
  e.preventDefault();
  
  let passField = e.currentTarget.closest('.form').querySelector('.form__input--password');
  
  if (passField.getAttribute('type') == 'password') {
    passField.setAttribute('type', 'text');
  } else {
    passField.setAttribute('type', 'password');
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.