<div class="input-wrapper" data-placeholder="Имя">
  <input type="text" class="input">
</div>
<div class="input-wrapper" data-placeholder="Почта">
  <input type="email" class="input">
</div>
<div class="input-wrapper" data-placeholder="Пароль">
  <input type="password" class="input">
</div>

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #e5e5e5;
}

.input-wrapper {
  position: relative;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease-in-out;
}

.input-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6.5em;
  padding: 0 1em;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 500;
  transition: color 0.25s ease-in-out;
  pointer-events: none;
  content: attr(data-placeholder);
}

.input-wrapper:focus-within {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}

.input-wrapper:focus-within::before {
  color: #3b53e6;
}

.input-wrapper:not(:last-child) {
  margin-bottom: 20px;
}

.input {
  padding: 0.5em 1em 0.5em 6.5em;
  border: none;
  font: inherit;
  background: transparent;
}

.input:focus {
  outline: none;
}

const wrappers = document.querySelectorAll('.input-wrapper');

for (const wrapper of wrappers) {
  if (wrapper.hasAttribute('data-placeholder')) {
    const input = wrapper.querySelector('.input');

    input.setAttribute('aria-label', wrapper.getAttribute('data-placeholder'));
  }
}