JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="test">
  <input name="blah" type="text" placeholder="Testing...">
  <label for="blah">Testing...</label>
</div>

SCSS

body {
  padding: 5rem;
}

.test {
  font-family: Arial;
  position: relative;

  label, input {
    font-size: 14px;
  }
  label {
    color: #777;
    position: absolute;
    left: 0;
    opacity: 1;
    transform: translate(2px, -20px);
    pointer-events: none;
    transition: transform 250ms, opacity 250ms;
  }

  input:-ms-input-placeholder + label {
    transform: translate(2px, 3px);
    opacity: 0;
  }
  input:placeholder-shown + label {
    transform: translate(2px, 3px);
    opacity: 0;
  }
  input:focus + label {
    opacity: 1;
    transform: translate(2px, -20px);
  }
  
  input:placeholder-shown:focus + label {
    transform: translate(2px, 3px);
    opacity: 0;
  }
}