JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<a href="javascript:alert('clicked');" class="button">RIPPLE BUTTON</a>

CSS

a.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 2px;
    line-height: 30px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -moz-border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
    text-decoration: none !important;
    cursor: pointer;
    outline: none;
    background-color: #D2D2D2;
    border-color: #D2D2D2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D2D2D2), color-stop(0.5, #E4E4E4), color-stop(0.5, #EDEDED), color-stop(1, #FFFFFF));
    background-image: -webkit-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
    background-image: -o-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
    background-image: linear-gradient(to top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
}
a.button:hover {
    background-color: #4488ee;
    border-color: #4488ee;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
    background-image: -webkit-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
    background-image: -moz-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
    background-image: -o-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
    background-image: -ms-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
    background-image: linear-gradient(to top, #4488ee 0%,...

JavaScript

//https://github.com/yuhua-chen/MAWButton/blob/master/js/mawbutton.js
(function ($) {
    $.fn.ripple = function (options) {
        var settings = $.extend({
            speed: 333, // ms
            alpha: 0.333,
            transitionEnd: function () {} // callback when transition ends.
        }, options);

        return this.each(function () {
            var $this = $(this);
            var supportEvent = ('ontouchstart' in window) ? 'touchstart' : 'mousedown';
            $this.addClass('ripple').on(supportEvent, function (e) { //bind touch/click event
                e.stopPropagation();
                $this.append('<div class="ripple-effect"></div>');
                // Fetch click position and size
                var posX = $this.offset().left,
                    posY = $this.offset().top;
                var w = $this.outerWidth(),
                    h = $this.outerHeight();
                var d = Math.max(w, h) * 2;
                var targetX = e.pageX - posX;
                var targetY = e.pageY - posY;
                var backColor = $this.css('color');

                //Fix target position
                if (!targetX || !targetY) {
                    targetX = e.originalEvent.touches[0].pageX - posX;
                    targetY = e.originalEvent.touches[0].pageY - posY;
                }

                var ratio = 0.5;
                var $effectElem = $this.children(':last');

                //Animate Start
                $effectElem.addClass('ripple-stop').css({
                    'top': targetY,
                        'left': targetX,
                        'width': d,
                        'height': d,
                        'margin-left': -d * ratio,
                        'margin-top': -d * ratio,
                        'background-color': $.Color(backColor).alpha(settings.alpha).toRgbaString(),
                        'transition-duration': settings.speed + 'ms',
                        '-webkit-transition-duration':...