JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<div class="group ">
  <input type="text" class="module-input" required="" value='this is value'/>
  <label>Name</label>
</div>
<div class="group ">
  <input type="text" class="module-input" />
  <label>Address</label>
</div>

CSS

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

input[value]:not([value=""]) ~ label,
input:focus ~ label {
  top: -8px;
  font-size: 12px;
  color: #94a3a9;
}

JavaScript

window.addEventListener('load', function() {
  var inp = document.querySelectorAll('input');
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener('change', function() {
      this.setAttribute("value", this.value);
    })
  }
})