JSFiddle - React, Tailwind, and code Playground

by sammy

HTML

<input type='text' placeholder='Test'>

CSS

label {
    position: absolute;
}

input {
    font-size: 13px;
    margin: 10px;
}

JavaScript

$(function(){
    $('body')
        .on('keyup input change', 'input.placeholdershim', function(){
            var $this = $(this);
            $this.data('placeholder-element').toggle(!$this.val());
        })
    
    $('input[placeholder]').each(function(){
        var $this = $(this);
        var placeholder = $this.attr('placeholder');
        var $label = $('<label></label>');
        
        $this
            .addClass('placeholdershim')
            .data('placeholder-element', $label)
            .removeAttr('placeholder')
        
        // Copy styling
        $label
            .css({
                fontSize: $this.css('font-size'),
                fontFamily: $this.css('font-family'),
                padding: $this.css('padding'),
                margin: $this.css('margin'),
                border: $this.css('border'),
                borderColor: 'transparent'
            });
        
        // `id` attribute for the label's `for` attribute
        var id = $this.attr('id') || $this.attr('id', 'placeholdershim'+Math.random().toString().substr(2)) && $this.attr('id');
        
        $label
            .text(placeholder)
            .attr('for', $this.attr('id'))
            .insertBefore($this);
    })
});