JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<div class="contadorWrapper">
     <div class="contador">
         <div class="contadorcontainer" style="height:40px; margin-top: 0;"><span>130678900€</span></div>
         <div class="contadorcontainer"><span>1455890</span></div>
         <div class="contadorcontainer"><span>2670289348</span></div>
     </div>
     </div>

CSS

.contadorWrapper{
height: 42px;
    overflow: hidden;
    background: url("http://edp.projectoskc2.com/edp2.png") no-repeat top left;
width: 241px;
    border-radius: 5px;
    margin: 10px auto;
    display: block;
}
.active .contadorcontainer{
 opacity: 1;
}
.contador{
    background: url("http://edp.projectoskc2.com/EDP_Contador.png") no-repeat bottom left;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
    border-radius: 5px;
}
.contadorcontainer{
    height: 41px;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 2px;
}
.contadorcontainer span{
    float: left;
    font-family: Arial;
    color: white;
    font-size: 18px;
    padding: 9px 7px 4px 0;
    width: 123px;
    text-align: right;
    opacity: 0.5;
}

JavaScript

(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ...