index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>replit</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<style>
  body {
    background: #ffd8a4
  }
  code{
    font-weight:bolder; 
  }
  pre{
    color:#FF0707;
  }
</style>

<body>
  <div class="container flex flex-col gap-4 items-center justify-center">

    <h1 class="text-5xl font-bold">Spin to Win!</h1>

    <div class="relative">

      <img src="https://register.flybuys.com.au/cdn/edm/library/assets/2017_07/wheel-pointer-v2.png" alt="pointer"
        class="mx-auto -mb-8 z-[100] relative" />

      <img src="spinthewheel.png" alt="sping wheel" class="wheel -z-[10] relative" />
    </div>

    <button class="btn bg-red-500 px-7 py-2">Spin</button>

    <pre>                                                                                             <code>10</code> spins. </pre>

  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
<script src="spinthewheel.js"></script>

</html>