JSFiddle - React, Tailwind, and code Playground

HTML

<form class="awesome-form">
  
  <div class="input-group">
    <input type="text" value="test">
    <label>Your Full Name</label>
  </div>
  
  <div class="input-group">
    <input type="email">
    <label>Your Email Address</label>
  </div>
  
  <input type="submit">
</form>

CSS

body {
  padding: 100px;
  -webkit-font-smoothing: antialiased;
}

input {
  background: none;
  border: solid 2px #21a1e1;
  color: #21a1e1;
  padding: 15px 40px;
  font-size: 18px;
  display: inline-block;
}
input:focus, input:active {
  outline: none;
}
input[type="text"], input[type="email"] {
  border: none;
  border-bottom: solid 2px #21a1e1;
}
input[type="submit"]:active {
  color: white;
  background: #21a1e1;
}

.input-group {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.input-group input {
  padding: 15px 0px;
}
.input-group label {
  position: absolute;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 18px;
  color: #999;
  pointer-events: none;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label,
.input-group input.has-value + label {
  top: -10px;
  font-size: 12px;
  color: #aaa;

JavaScript

$(function(){
  
  $('.awesome-form .input-group input').focusout(function(){
    
    var text_val = $(this).val();
    
    if(text_val === "") {
      
      $(this).removeClass('has-value');
      
    } else {
      
      $(this).addClass('has-value');
      
    }
    
  });
  
});