JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="flip">
    <button id="flip">Flip!</button>
</div>

<div class="tile">
    <div class="top">
        <div class="card static"></div>
        <div class="card flip animated"></div>
    </div>
    <div class="bottom">
        <div class="card static"></div>
        <div class="card flip animated active"></div>
    </div>
</div>

CSS

body {
    background:#EEE;
}
.flip { position:absolute; left:300px; }

/** Display styles for the "cards" displayed for each number. **/
.top .card:before, .top .card, .top .card:after {
    background-color: #222;
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#333));
    background-image: -webkit-linear-gradient(top, #222, #333);
    background-image:    -moz-linear-gradient(top, #222, #333);
    background-image:     -ms-linear-gradient(top, #222, #333);
    background-image:      -o-linear-gradient(top, #222, #333);
    background-image:         linear-gradient(top, #222, #333);
    
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius:  10px;
       -moz-border-radius-topright:  10px;
       -moz-border-radius-topleft:   10px;
           border-top-right-radius:  10px;
           border-top-left-radius:   10px;
          
    /* prevent bg color from leaking outside the border: */        
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
}
.bottom .card:before, .bottom .card, .bottom .card:after {
    background: #111;
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#111));
    background-image: -webkit-linear-gradient(top, #222, #111);
    background-image:    -moz-linear-gradient(top, #222, #111);
    background-image:     -ms-linear-gradient(top, #222, #111);
    background-image:      -o-linear-gradient(top, #222, #111);
    background-image:         linear-gradient(top, #222, #111);
    
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius:  10px;
       -moz-border-radius-bottomright:  10px;
       -moz-border-radius-bottomleft:   10px;
           border-bottom-right-radius:  10px;
           border-bottom-left-radius:   10px;
}

.tile {
    position:absolute;
    top:20px;
    left:50px;
    width:200px;
    height:400px;
    display:block;
}
.tile...

JavaScript

function resetFlip() {
    $(".bottom .flip").toggleClass("active");
    var t = setTimeout("resetFlipTimeout()", 500);
}
function resetFlipTimeout() {
    $(".bottom .flip, .top .flip")
        .css('display', 'none')
        .toggleClass("active");
    
    // Until I find a way to remove the animation...
    setTimeout("unhide()", 500);
}
function unhide() {
    $(".bottom .flip, .top .flip").css("display", "block");    
    
    $("#flip").removeAttr("disabled");
}
$(document).ready(function() { 
    $("#flip").click(function() {
        $("#flip").attr("disabled", "true");
        $(".top .flip").toggleClass('active');
        setTimeout('resetFlip()', 480);
    });
});