JSFiddle - React, Tailwind, and code Playground

by mach3ss

HTML

<div id="demo" class="fadeButton">
    <a href="#">FadeButton</a>
</div>

CSS

#demo {
    display:block;
    width:135px;
    height:135px;
    background-position:left top;
    background-repeat:no-repeat;
    background-image:url(default.png);
    background-image:url(https://lh3.googleusercontent.com/_JJkNs5Ixl70/TYonuvu-57I/AAAAAAAABPw/5rHeboNaiR8/20110324-default.png);
    
}
#demo a {
    display:block;
    width:135px;
    height:135px;
    text-indent:-9999px;
    overflow:hidden;
    background-position:left top;
    background-repeat:no-repeat;
    background-image:url(hover.png);
    background-image:url(https://lh5.googleusercontent.com/_JJkNs5Ixl70/TYonusp0MsI/AAAAAAAABPs/DxARTd2cyh0/20110324-hover.png);
}
.fadeButton a {
    opacity:0;
    -webkit-transition:opacity .5s linear;
}
.fadeButton a:hover {
    opacity:1;
    -webkit-trantision:opacity .5s linear;
}
.no-csstransitions .fadeButton a:hover{
    opacity:0;
}

JavaScript

/**
    Head JS        The only script in your <HEAD>
    Copyright    Tero Piirainen (tipiirai)
    License        MIT / http://bit.ly/mit-license
    Version        0.9
    
    http://headjs.com
*/
(function(a){var b=a.documentElement,c={screens:[320,480,640,768,1024,1280,1440,1680,1920],section:"-section",page:"-page",head:"head"},d=[];if(window.head_conf)for(var e in head_conf)head_conf[e]!==undefined&&(c[e]=head_conf[e]);function f(a){d.push(a)}function g(a){var c=new RegExp("\\b"+a+"\\b");b.className=b.className.replace(c,"")}function h(a,b){for(var c=0;c<a.length;c++)b.call(a,a[c],c)}var i=window[c.head]=function(){i.ready.apply(null,arguments)};i.feature=function(a,c,e){{if(a){Object.prototype.toString.call(c)=="[object Function]"&&(c=c.call()),f((c?"":"no-")+a),i[a]=!!c,e||(g("no-"+a),g(a),i.feature());return i}b.className+=" "+d.join(" "),d=[]}};var j=navigator.userAgent.toLowerCase();j=/(webkit)[ \/]([\w.]+)/.exec(j)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(j)||/(msie) ([\w.]+)/.exec(j)||!/compatible/.test(j)&&/(mozilla)(?:.*? rv:([\w.]+))?/.exec(j)||[],j[1]=="msie"&&(j[1]="ie"),f(j[1]),i.browser={version:j[2]},i.browser[j[1]]=true;if(i.browser.ie)for(var k=3;k<11;k++)parseFloat(j[2])<k&&f("lt-ie"+k);h("abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),function(b){a.createElement(b)}),h(location.pathname.split("/"),function(a,d){if(this.length>2&&this[d+1]!==undefined)d&&f(this.slice(1,d+1).join("-")+c.section);else{var e=a||"index",g=e.indexOf(".");g>0&&(e=e.substring(0,g)),b.id=e+c.page,d||f("root"+c.section)}});function l(){var a=window.outerWidth||b.clientWidth;b.className=b.className.replace(/ (w|lt)-\d+/g,""),f("w-"+Math.round(a/100)*100),h(c.screens,function(b){a<=b&&f("lt-"+b)}),i.feature()}l(),window.onresize=l,i.feature("js",true).feature()})(document),function(){var a=document.createElement("i"),b=a.style,c=" -o- -moz- -ms- -webkit- -khtml-...