JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


 <div class="container d-flex align-items-center">
   <div class="row">
     <div class="col-md-2">

       <form>

         <div class="form-outline mb-4">
           <input type="email" id="form1Example1" class="form-control" />
           <label class="form-label" for="form1Example1">Email address</label>
         </div>


         <div class="form-outline mb-4">
           <input type="password" id="form1Example2" class="form-control" />
           <label class="form-label" for="form1Example2">Password</label>
         </div>



         <button type="submit" class="btn btn-primary btn-block">Sign in</button>
         
       </form>

     </div>
   </div>
 </div>

CSS

body{
  margin: auto;
  padding-top: 30px;
  max-width: 300px;
  }

div{
  margin:20px 0 20px 0;
}

.form-outline {
    position: relative;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    transition: all .2s linear;
}

.form-control:active~.form-label{
  transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
  background-color: rgb(255, 255, 255);
}

.form-control:focus~.form-label{
    transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
    background-color: rgb(255, 255, 255);
}

.form-control~.form-label {
  position: absolute;
  top: 0;
  left: .75rem;
  padding-top: .5rem;
  pointer-events: none;
  transition: all .2s ease-out;
  color: rgba(0,0,0,.6);
  margin-bottom: auto;
}