JSFiddle - React, Tailwind, and code Playground

by hobobne

HTML

<div style="padding: 30px;">

<a href="#" class="red_button">View Commercials</a>

    
</div>

CSS

a.red_button {text-decoration: none; font-weight: normal !important;}
.red_button {padding: 5px 10px; background: #C30414; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #FFFFFF; cursor: pointer; font-weight: normal !important;}
    .red_button.hover {background: #E70000;}
    .red_button.fl {margin-right: 5px;}
    .red_button.fr {margin-left: 5px;}

JavaScript

/*
 * kvSmoothTransition 1.1.0, jQuery plugin
 *
 * @author: Kalle H. Väravas <[email protected]>
 * @date: 16/11/2011
 *
 * Dual licensed under the MIT and GPL
 * Originally made for http://stackoverflow.com/questions/6800950
 */
var kvSmoothTransition_elms = {},
    kvSmoothTransition_runs = 0;
$.fn.kvSmoothTransition = function (options) {
    var options = $.extend({
        showSpeed: 350,
        hideSpeed: 500,
        includeText: true
    }, options),
        elms = {};
        kvSmoothTransition_runs++;
    
    $(document).resize(function () {
        kvSmoothTransitionRePosition();
    });
    
    return this.each(function (i, link) {
        
        var $this = $(this),
            this_position = $this.position();

        $this.append(elms[i] = $('<div />').filter(function (index) {
            if (options['includeText']) {
                $(this).html($this.html());
            }
            if ($this.attr('id')) {
                $(this).attr('id', $this.attr('id'));
            }
            return true;
        }).addClass($this.attr('class') + ' hover').css({
            'display': 'block',
            'opacity': 0,
            'position': 'absolute',
            'top': this_position.top,
            'left': this_position.left,
            'width': $this.width(),
            'height': $this.height(),
            'cursor': 'pointer'
            
            // For testing: ,'border': '1px dotted blue'
        })).hover(function () {
            $(elms[i]).stop().animate({
                'opacity': 1
            }, options['showSpeed']);
        }, function () {
            $(elms[i]).stop().animate({
                'opacity': 0
            }, options['hideSpeed']);
        });
        kvSmoothTransition_elms[kvSmoothTransition_runs] = elms;
    });
};
kvSmoothTransitionRePosition = function () {
    $.each(kvSmoothTransition_elms, function (i, runs) {
        $.each(runs, function (i, value) {
            parent = $(value).parent();
   ...