index.html

<script src="https://cdn.tailwindcss.com"></script>
<style>
    body {
        margin: 0;
        background: black;
    }
</style>
<!-- using Tailwind CSS classes -->
<div class="fixed text-white text-sm ml-2 mt-1 select-none"><span>Score: </span><span id="scoreEl">0</span></div>

<div class="fixed inset-0 flex items-center justify-center" id="modalEl">
    <div class="bg-white max-w-md w-full p-6 text-center rounded-md">
        <h1 class="text-4xl font-bold leading-none" id="bigScoreEl">0</h1>
        <p class="text-sm text-gray-700 mb-4">Points</p>
        <div>
            <button class="bg-blue-500 text-white w-full py-5 rounded-full" id="startGameBtn" >Start Game</button>
        </div>
    </div>
</div>

<canvas></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./index.js"></script>