JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>

JavaScript

var juxinput = function(kwargs) {
    var test = document.createElement('input');
    var input = $('<input>').attr({
        type: kwargs.type,
        placeholder: kwargs.placeholder
    }); 
    if ('placeholder' in test) {
        return input;
    } else {
        input = input
                  .val(input.attr('placeholder'))
                  .css('color', 'grey')
                  .focus(function() {
                      var $t = $(this);
                      if (!$t.data('hasValue')) {
                          $t.val('')
                            .css('color', '');
                      }
                    })
                  .focusout(function() {
                      if (!$(this).val()) {
                          $(this)
                              .val(input.attr('placeholder'))
                              .css('color', 'grey')
                      }
                    })
                  .keypress(function() {
                      var $t = $(this);
                      if (!$t.val()) {
                          $t.data('hasValue', false);
                      } else {
                          $t.data('hasValue', true);
                      }
                    });
        return input;
    }
}

$('#foo').append(
    juxinput({
        type: 'text',
        placeholder: 'name'
    }),
    juxinput({
        type: 'text',
        placeholder: 'address'
    })
);