JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" placeholder="Placeholder">
    <textarea placeholder="Placeholder"></textarea>
</div>

CSS

input {
    padding: 5px 10px;
    background: transparent;
}

textarea {
    resize: none;
    padding: 30px;
    background: transparent;
}

JavaScript

$.fn.placeholder = function () {
    return this.each( function () {
        var elem = $( this );

        if ( elem.is( "input" ) || elem.is( "textarea" ) ) {
            var placeholder = elem.attr( "placeholder" ),
                wrapper = $( "<span></span>" ).css( {"position":"relative", "display":"inline-block"} ),
                label = $( "<label></label>" ).text( placeholder ),
                border = elem.outerWidth() - elem.innerWidth(),
                paddingH = elem.innerWidth() - elem.width(),
                paddingV = elem.innerHeight() - elem.height(),
                left = elem.outerWidth( true ) - elem.width() - Math.floor( (paddingH / 2) ) - border,
                top = elem.outerHeight( true ) - elem.height() - Math.floor( (paddingV / 2) ) - border;

            label.css( {
                "position":"absolute",
                "top":top,
                "left":left,
                "color":"#a9a9a9",
                "z-index":10
            } );
            elem.css( "z-index", 1000 ).css( "position", "relative" );
            elem.wrap( wrapper );
            elem.parent().prepend( label );

            elem.focus( function () {
                elem.parent().find( "label" ).hide();
            } );
            elem.blur( function () {
                elem.parent().find( "label" ).toggle( $.trim( elem.val() ).length == 0 );
            } );
        }
    } );
};

$("input").placeholder();
$("textarea").placeholder();