JSFiddle - React, Tailwind, and code Playground

by soboaz

HTML

<div id="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
        <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
        <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#main {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height:202px;
    width:500px;
    margin:auto;
}
div:not(#main) {
    position:absolute;
    height:200px;
    width:150px;
    border:1px solid #CCC;
    box-shadow:-3px 0 5px #DDD;
    border-radius:5px;
    font-size:85px;
    font-family:georgia;
    color:#666;
    text-align:center;
    text-shadow:2px 2px #CCC;
    line-height:190px;
    background:#EEE;
}

div:not(#main):hover {
    box-shadow:0 0 10px #333;
    color:#333;
}

JavaScript

function reset_cards() {
    $('#main div').each(function (i) {
        $(this).css({
            'z-index': i,
                'top': 0,
                'left': i * 20 + 10,
                'opacity': 1
        }).removeClass('hidden').text(i + 1)
    })
}

function toss_cards() {
    var card = $('#main div:not(.hidden):last')
    if (card.length) {
        card_index = card.index('#main div:not(.hidden)')
        card.addClass('hidden').animate({
            left: (card_index % 2 ? 500 : -300),
            top: 200,
            opacity: 0
        }, 500, toss_cards)
    } else {
        reset_cards()
        $('#main div').css({
            'cursor': 'move'
        }).draggable().click(function () {
            var z_index = 0;
            $('#main div').each(function () {
                z_index = parseInt($(this).css('z-index')) > z_index ? parseInt($(this).css('z-index')) : z_index
            });
            $(this).css({
                'z-index': z_index+1
            });
        });
        //toss_cards()
    }
}


$(document).ready(function () {
    reset_cards();
    toss_cards()
});