JSFiddle - React, Tailwind, and code Playground

by Vela Theme

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<form>
  <div class="form-group input-field">
    <input class="input-material" required="" type="text" value="Full name" readonly>
    <label>Full name</label>
  </div>
  <div class="form-group input-field">
    <input class="input-material" required="" type="email" placeholder="Email">
    <label>Email</label>
  </div>
  <div class="form-group input-field">
    <input class="input-material" required="" type="text">
    <label>Subject</label>
  </div>
  <div class="form-group input-field">
    <textarea class="input-material" rows="4" required=""></textarea>
    <label>Message</label>
  </div>
</form>

CSS

* {
  box-sizing: border-box;  
}

form {
  max-width: 360px;
  margin: 40px auto;
}

.input-field {
    position: relative;
    margin-top: 30px;
}

.input-material {
    display: block;
    width: 100%;
    height: 40px;
    padding: 12px 0;
    border: 0px;
    border-bottom: 1px solid #ccc;
    outline: none;
    box-shadow: none;
    transition: all 0.3s;
}

textarea.input-material {
  height: auto;
}

.input-material:focus:not([readonly]) {
  border-bottom: 1px solid #1ABBAC;
  box-shadow: 0 1px 0 0 #1ABBAC;
}

.input-material:focus:not([readonly]) + label {
  color: #1ABBAC;
}

.input-field label {
    position: absolute;
    font-weight: normal;
    top: 0.8rem;
    left: 0;
    color: #bbb;
    cursor: text;
    pointer-events: none;
    transition: .2s ease-out;
}

.input-field label.active {
    font-size: 12px;
    transform: translateY(-140%);
}

JavaScript

$(document).ready(function() {
	var input_selector = '.input-material';
  $(input_selector).each(function(index, element) {
			if ($(element).val().length > 0 || element.autofocus || $(this).attr('placeholder') !== undefined) {
          $(this).siblings('label').addClass('active');
      }
    	else {
          $(this).siblings('label').removeClass('active');
      }
  });
  $(document).on('change', input_selector, function () {
      if($(this).val().length !== 0 || $(this).attr('placeholder') !== undefined) {
        	$(this).siblings('label').addClass('active');
      }
  });
  $(document).on('focus', input_selector, function () {
      $(this).siblings('label').addClass('active');
  });
  $(document).on('blur', input_selector, function () {
      var $inputElement = $(this);
      if ($inputElement.val().length === 0 && $inputElement.attr('placeholder') === undefined) {
        $inputElement.siblings('label').removeClass('active');
      }
  });
});