JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <br>
    <div>
        <textarea id='area'></textarea>
        <br>
        <input type='text' id='input'>
        <p id='text'>SomeText</p>
    </div>
</body>

CSS

textarea {
        height: 200px;
        width: 300px;
        background: black;
        color: white;
}

input {
        width: 200px;
}

JavaScript

jQuery.fn.addClearButton = function () {

    if (this.prop('tagName') != 'TEXTAREA' && this.prop('tagName') != 'INPUT') return this;

    var self = this;

    var CLOSE_BUTTON = '&#10060',
        buttonHeight = (this.innerHeight() >= 20) ? 20 : this.innerHeight();

    var position = this.css('position');
    if (position != 'relative' && position != 'absolute' && position != 'fixed') {
        this.css('position', 'relative');
    }

    this.css({
        'resize': 'none',
            'padding-right': buttonHeight
    });

    var div = $("<div>").html(CLOSE_BUTTON).css('position', 'absolute');

    this.after(div);

    var buttonOpts = {
        opacity: '.3',
        border: '1px solid grey',
        height: 'auto',
        padding: 1,
        margin: 0,
        cursor: 'pointer',
        color: this.css('color'),
        fontSize: buttonHeight,
        MozUserSelect: 'none',
        KhtmlUserSelect: 'none',
        WebkitUserSelect: 'none',
        OUserSelect: 'none'
    }

    div.css(buttonOpts);

    var coordLeft = this.offset().left + this.outerWidth() - div.outerWidth(),
        coordTop = this.offset().top;

    div.css({
        top: coordTop,
        left: coordLeft,
    });


    /*  --------------- events ----------------- */
    div.on('click', function () {
        self.val('').trigger('input').trigger('change').focus();
    })

    div.on('mouseenter', function () {
        $(this).css('opacity', 1);
    })

    div.on('mouseleave', function () {
        $(this).css('opacity', .3);
    })

    return this;
}

$(function () {
    $('#area').addClearButton();
    $('#input').addClearButton();
    $('#text').addClearButton();
})