JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" min="1"></input>
<button class="button">Start</button>
<div class="container"></div>

CSS

html, body {
    width:100%;
    height:100%;
    overflow:hidden;
}
.container {
    display:block;
    width:100%;
    height:100%;
}
.container:after {
    content:' ';
    display:block;
    height:0;
    clear:both;
}
.card1 {
    display: inline-block;
    background-color: red;
    height:100px;
    width:100px;
    margin:10px;
}
.card2 {
    display: inline-block;
    background-color: green;
    height:100px;
    width:100px;
    margin:10px;
}
.card3 {
    display: inline-block;
    background-color: blue;
    height:100px;
    width:100px;
    margin:10px;
}

JavaScript

$(document).ready(function () {

    $(".button").click(function () {
        // create the cards
        $(".container").append("<div class='card1 cards'></div>") &&
        $(".card1").clone().appendTo(".container");
        $(".container").append("<div class='card2 cards'></div>") &&
        $(".card2").clone().appendTo(".container");
        $(".container").append("<div class='card3 cards'></div>") &&
        $(".card3").clone().appendTo(".container");

        // randomize cards in stack
        var cards = $(".cards");
        for (var i = 0; i < cards.length; i++) {
            var target = Math.floor(Math.random() * cards.length - 1) + 1;
            var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
            var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
            cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
        }
    });
});