JSFiddle - React, Tailwind, and code Playground

by moob

HTML

Hmm <div><input placeholder="placeholder" /><span class="placeholder">placeholder</span></div>

CSS

div {position:relative}
span, input {
  display:inline-block;
  padding: 10px;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    font-family:Arial;
    font-size: 16px;
    }
input {
    -webkit-box-shadow: inset 0 -1px 0 #ddd;
    box-shadow: inset 0 -1px 0 #ddd;
  position:absolute;
  left:0;
  background:transparent
}
span {
  color:#fff;
  z-index:0
}
input:focus + span {color:#ddd}