JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" data-placeholder="test">

JavaScript

var inputArray = document.getElementsByTagName('input');
  for (var i = 0; i < inputArray.length; i++) {
    if ((inputArray[i].getAttribute('type') == 'text') && (inputArray[i].getAttribute('data-placeholder') != '')) {
      if ((inputArray[i].getAttribute('value') === '') || (inputArray[i].getAttribute('value') === null)) {
        inputArray[i].setAttribute('value', inputArray[i].getAttribute('data-placeholder'));
      }
      inputArray[i].onblur = function() { (function(el) {
        if (el.getAttribute('value') === '') {
          el.setAttribute('value', el.getAttribute('data-placeholder'));
        }
      })(this); };
      inputArray[i].onfocus = function() { (function(el) {
          if (el.getAttribute('value') === el.getAttribute('data-placeholder')) {
            el.setAttribute('value', '');
          }
      })(this); };
    }
  }