JSFiddle - React, Tailwind, and code Playground

by jeanlescure

HTML

<div class="tile">
    <div class="one contents">
        <span class="heading"><span class="title">9.25%</span><br/>Increase</span>
        <span class="inactive-arrow"></span>
    </div>
    <div class="two contents">
        <span class="hover-copy">in capital reserves &mdash; estimated Basel 3 Tier 1 Common Capital Ratio at December 31, 2012 (U.S. Basel 3 NPRs Fully Phased-in).</span>
    </div>
</div>

CSS

* {
    font-family: arial, sans-serif;
}

.tile {
    background: #f5f2ee;
    width: 400px;
    position: relative;
    margin-bottom: 3px;
}

.tile .contents {
    padding: 30px;
}
.tile .two.contents {
    padding: 25px 30px;
}

.red {
    color: #c41230;
    display: block;
}

.one .red {
    font-size: 50px;
}
.one strong{
    color:#c41230;
}
.two .red {
    font-size: 28px;
}

.one,.two {
    display: block;
}
.two {
    display: none;
}

JavaScript

$(function(){
    $('.tile').each(function(idx,el){
        $(el).data('oHeight',$(el).height());
        $(el).data('animIn',false);
        $(el).data('animBw',false);
        $(el).data('animOut',false);
        $(el).data('mouseLeft',false);
    });
    $('.tile').on('mousemove',function(){
        if($(this).data('animIn')==false && $(this).data('animOut')==false){
            $(this).trigger('mouseenter');
        }
    });
    $('.tile').on('mouseenter',function(){
        if($(this).data('animIn')==false && $(this).data('animOut')==false){
            $(this).data('animIn',true);
            var tOne = $(this).find('.one');
            var tTwo = $(this).find('.two');
            $(this).height( $(this).data('oHeight').toString()+"px" );
            tOne.css( {'position':'absolute','top':0,'left':0} ).fadeOut();
            tTwo.prepend('<span class="hover-into"></span>');
            tTwo.css({position:'absolute',visibility: 'hidden',display:'block'}).find('.hover-into').prepend(tOne.html());
            tTwo.find('.hover-into').find('br').remove();
            var newHeight = tTwo.outerHeight().toString()+"px";
            tTwo.removeAttr('style').fadeIn();
            $(this).animate({height:newHeight},1000,function(){
                $(this).data('animBw',true);
                if($(this).data('mouseLeft') == true){
                    $(this).data('mouseLeft',false);
                    $(this).trigger('mouseleave');
                }
            });
        }
    });
    $('.tile').on('mouseleave',function(){
        if($(this).data('animBw')==true && $(this).data('animOut')==false){
            $(this).data('animOut',true);
            var tOne = $(this).find('.one');
            var tTwo = $(this).find('.two');
            tTwo.fadeOut();
            tOne.fadeIn();
            $(this).animate( {height:$(this).data('oHeight').toString()+"px"} ,1000,function(){
                tTwo.find('.hover-into').remove();
               ...