JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="text">
  <input type="text" placeholder="Your Name">
  <label>Your Name</label>
</div><div class="text">
  <input type="text" placeholder="Your Title">
  <label>Your Title</label>
</div>
<div class="text">
  <input type="password" placeholder="Your Password">
  <label>Your Password</label>
</div>

CSS

html {
  background: white;
  font-family: arial;
}

body {
  margin: 4rem 10rem;
}

.text {
  margin-bottom: 1rem;
  position: relative;
}

input {
  border: 1px solid #ddd;
  padding: .9rem .6rem .3rem;
  background: transparent;
}

input:focus {
  outline: lightblue auto 1px;
}

input + label {
  color: silver;
  font-size: .833rem;
  left: .4rem;
  padding: 2px .25rem;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform-origin: top left;
  transform: scale(.875,.875);
  z-index: -1;
}

input::-ms-input-placeholder {
  background: white;
  color: silver;
  left: -.4rem;
  padding: .9rem .4rem .2rem;
  position: relative;
  transform-origin: top left;
  transition: opacity 250ms, transform 250ms;
  z-index: 1;
}

input::placeholder {
  background: white;
  color: silver;
  display: block;
  left: -.4rem;
  opacity: 1;
  padding: .9rem .4rem .2rem;
  position: relative;
  transform-origin: top left;
  transition: opacity 250ms, transform 250ms;
  z-index: 1;
}

input::-webkit-input-placeholder {
  background: white;
  color: silver;
  left: -.4rem;
  padding: .9rem .4rem .2rem;
  position: relative;
  transform-origin: top left;
  transition: opacity 250ms, transform 250ms;
  z-index: 1;
}

input:focus::-wekbkit-input-placeholder {
  padding-top: 0;
  top: -.9rem;
  transform: scale(.875,.875);
}

input:focus::-ms-input-placeholder {
  padding-top: 0;
  top: -.9rem;
  transform: scale(.875,.875);
}

input:focus::-moz-placeholder {
  padding-top: 0;
  top: -.9rem;
  transform: scale(.875,.875);
}