JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-input">
  <input type='text' />
  <label>One</label>
</div>

<div class="text-input">
  <input type='text' />
  <label>Two</label>
</div>

CSS

body {
      font-family: helvetica, sans-serif;
    }
    .text-input {
      position: relative;
      padding-top: 20px;
      margin-top: 5px;
    }
    .text-input input {
      background: none;
      height: 35px;
      width: 200px;
      border: 0;
      border-bottom: 2px solid #c2c2c2;
      outline: none;
      transition: .2s ease-out all;
    }
    .text-input label {
      position: absolute;
      left: 5px;
      top: 31px;
      color: #c2c2c2;
      transition: .2s ease-out all;
    }
    .text-input input:focus {
      border-bottom: 2px solid #89ac23;
    }
    .text-input input:focus + label {
      font-size: 1em;
      top: 0;
      left: 0;
      font-size: .8em;
      color: inherit;
    }