JSFiddle - React, Tailwind, and code Playground

by profesor08

HTML

<div>
  <input type="text" id="text">
  <label for="text">Login:</label>
</div>

CSS

body {
  font-size: 18px;
  padding: 50px;
}

div {
  position: relative;
}

input {
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0;
  border-bottom: 2px solid green;
  padding: 5px;
}

label {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translateY(-50%);
  transition: ease-in-out all 150ms;
}

input:focus + label {
  top: 0;
  transform: translateY(-100%);
}