JSFiddle - React, Tailwind, and code Playground

by Павел KLON

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="form-row">
  <input class="form-row__input" type="text" required>
  <div class="form-row__desc">Имя</div>
</div>

CSS

.form-row {
  position: relative;
}

.form-row__input {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #c3c3c3;
  padding: 0 0 0 10px;
}

.form-row__desc {
  position: absolute;
  top: 20px;
  left: 10px;
  font-size: 14px;
  transition: 0.2s ease-in;
}

.form-row__input:valid + .form-row__desc,
.form-row__input:focus + .form-row__desc {
  top: 5px;
  font-size: 11px;
}