JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<input type='text' value='name' />
<input type='text' value='email' />

CSS

input[type=text] {
  color: #999;
  padding: 5px 3px;
}
input[type=text].active {
  color: #000;
}
body {
  padding: 10px;
}

JavaScript

$('input[type=text]').on('focus', function () {
  $(this).toggleClass('active');
  if (this.innerTextVal === undefined) {
    this.innerTextVal = this.value;
  }
  if (this.value === this.innerTextVal) {
    this.value = '';
  }
}).on('blur', function () {
  if (this.value === '' || this.value === null) {
    this.value = this.innerTextVal;
    $(this).toggleClass('active');
  }
});