JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div class="form-field">
  <label for="a">a</label>
  <input id="a" type="text">
  </div>
  <div class="form-field">
  <label for="b">b</label>
  <input id="b" type="text">
  </div>
  <div class="form-field">
  <label for="c">c</label>
  <input id="c" type="text">
</div>

SCSS

.form-field {
  font-size: 20px;
  position: relative;
}
input {
  display: block;
  margin-top: 20px;
}
label {
  top: 0;
  left: 0;
  position: absolute;
  transform: translate(0,0) scale(1);
  line-height: 1;
  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
  width: 100%;
  
  &.minimize {
    color: red;
  }
}

JavaScript

minimizeLabel = function(el) {
  el.classList.add('minimize');
};

var fields = document.querySelectorAll('.form-field');

for (var i = 0; i < fields.length; i++) {
	var field = fields[i];
  var label = field.querySelector('label');
  field.addEventListener('focus', minimizeLabel(label));
};