JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='input-box'>
  <div class='input-wrapper'>
    <input class='input' />
    <div class='description'>
      <div>
        First Name
      </div>
    </div>
  </div>
</div>

SCSS

body {
  font-family: sans-serif;
}

.input {
  box-sizing: border-box;
  background: transparent;
  padding: 5px 1px 3px;
  font-size: 16px;
  outline: none;
  border: none;
  border-bottom: 1px solid #aaa;
  transition: border-color 0.2s ease;
  
  &:focus {
    border-color: teal;
    transition: border-color 0.2s ease;
  }
}

.input-box {
  background: white;
  padding: 25px 10px 15px;
  display: inline-block;
  
  .input-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .description {
    position: absolute;
    bottom: 3px;
    left: 1px;
    color: darken(gray, 10%);
    transition: all 0.2s ease;
  }
  
  .input:focus {
    ~ .description {
      font-size: 12px;
      bottom: 100%;
      transition: all 0.2s ease;
    }
  }
}