JSFiddle - React, Tailwind, and code Playground

by mrtoxas

HTML

<label class="input-control">
  <textarea name="" id="" cols="" rows="" required="required"></textarea>
  <span>Placeholder</span>
</label>

CSS

body {
  padding: 40px;
}

textarea {
  display: block;
}

.input-control {
  position: relative;
}
.input-control span {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 5px;
  cursor: text;
  transition: 0.1s linear;
}

textarea:valid + span,
textarea:focus + span {
  color: Red;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  font-size: small;
}