JSFiddle - React, Tailwind, and code Playground

by dave ho

HTML

<div class="form-row">
  <input type="text" value="" />
  <label>Your name</label>
</div>

<div class="form-row">
  <input type="email" />
  <label>Your email address</label>
</div>

CSS

.form-row {
  position: relative;
  margin: 10px;
}

input:focus ~ label,
input:not(:focus):not(required) ~ label
input:not(:focus):valid ~ label{
  top: 3px;
  bottom: 10px;
  left: 5px;
  opacity: 1;
  font-size: 11px;
}

input {
  width: 200px;
  padding: 15px 5px 2px 5px;
}

input[value=""] label {
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 5px;
  font-size: 24px;
  opacity: .25;
  transition: 0.2s ease all;
}