JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="txt" data-shadowed="username" data-lang="english"/>

CSS

.txt {padding:0px 2px;}
.shadowed-textbox-parent {position:relative;display:inline-block; border:solid 1px #ababab;height:30px;width:120px;background:#fff;}
    .shadowed-textbox-parent input {position:absolute;top:0px;left:0px;background:transparent; border:none;outline-width: 0;}
    .shadowed-textbox-parent div {position:absolute;top:0px;left:0px;overflow:hidden;display:inline-block;}
.inactive-shadowed-text div {font-weight:bold;color:#666;}

JavaScript

(function ($) {
    jQuery.fn.shadowed = function (options) {
        var defaults = {
            dataClass: 'shadowed',
            parentCss: 'shadowed-textbox-parent',
            inactiveClass: 'inactive-shadowed-text',
            activeBackground: '#fff'

        }
        options = jQuery.extend(defaults, options);
        return this.each(function () {
            var $this = $(this);
            $this.find('[data-' + options.dataClass + ']').each(function () {
                var $t = $(this);
                var shadow = $('<div>').html($t.data(options.dataClass))
                var p = $('<div>').addClass(options.parentCss).addClass(options.inactiveClass)
                    .appendTo($t.parent()).append(shadow).append($t);
                $(p).add(shadow).css({ 'padding': $t.css('padding'), 'font-size': $t.css('font-size'), 'font-family': $t.css('font-family'), 'text-align': $t.css('text-align') })
                $t.css({ 'top': '0px', 'left': '0px', 'right': '0px', 'bottom': '0px', 'line-height': (p.height()-4) + 'px','height':p.height()+'px' })
                shadow.css({ 'top': '2px', 'left': '2px', 'right': '2px', 'bottom': '2px', 'line-height': (p.height()-4) + 'px', 'height': (p.height()-4) + 'px' })
            });
            $this.on('change', '[data-' + options.dataClass + ']', function () {
                alert(1);
                if ($(this).val().trim() != '')
                { $(this).css('background', options.activeBackground); }
                else
                { $(this).css('background', 'transparent'); }
            });
        });
    }
})(jQuery);
$('body').shadowed();