JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div>
            <button id="start">Start new game</button>
            <button id="endStep">Take cards / End step</button>
            <div id="deck"></div>
        </div>
        <div id="table">
            <div id="computerPlayer">
            </div>

            <div id="activeCards">
            </div>

            <div id="userPlayer">
            </div>
        </div>

        <style>
            #table, #computerPlayer, #userPlayer, #activeCards {
                float: left;
                clear: both;
                max-width: 576px;
                min-height: 132px;
            }

            #start {
                margin-left: 10px;
            }

            #deck {
                display: inline-block;
                margin-left: 20px;
                margin-bottom: 40px;
            }

            .card {
                width: 60px;
                height: 100px;
                display: inline-block;
                float: left;
                margin: 10px;
                padding: 4px 6px;

                font-size: 20px;
                font-weight: bold;

                background: #fff;
                color: #333;
                border: 2px solid #333;
                border-radius: 4px;
            }

            .card.closed {
                background: #aaa;
                color: #fff;
            }

            .hearts, .diamonds {
                color: #f00;
            }


            #activeCards {
                height: 170px;
                min-height: 170px;
            }

            #activeCards .card.over {
                position: absolute;
                margin-left: -80px;
                margin-top: 40px;
            }
        </style>


        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"
        ></script>

        <script>
            const...