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;
}
.card4 {
    display: inline-block;
    background-color: purple;
    height:100px;
    width:100px;
    margin:10px;
}
.card5 {
    display: inline-block;
    background-color: orange;
    height:100px;
    width:100px;
    margin:10px;
}

JavaScript

$(document).ready(function () {

    $(".button").click(function () {
        // clear the container
        $('.container').html('');
        
        // get the value from the input
        var numCards = parseInt($('input').val());
        
        for (var i = 1; i <= numCards; i++) {
            // create the cards
            $(".container").append("<div class='card" + i + " cards'></div>") &&
            $(".card" + i).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));
        }
    });
});