JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>ルーレット</title>

    <link rel="preload" href="https://via.placeholder.com/24x48?text=+0+" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=1" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=2" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=3" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=4" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=5" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=6" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=7" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=8" as="image" type="image/png">
    <link rel="preload" href="https://via.placeholder.com/24x48?text=9" as="image" type="image/png">

    <script type="text/javascript">
      spd = 100;
      tID = 0;
      i = 0;
      j = 0;
      k = 0;
      m = 0;

      function start_slot() {
        if (i > 9) {
          i = 0;
        }
        if (j > 9) {
          j = 0;
        }
        if (k > 9) {
          k = 0;
        }
        document.f.x.value = i;
        document.f.x.className = "image-" + i;
        document.f.y.value = j;
        document.f.y.className = "image-" + j;
        document.f.z.value = k;
        document.f.z.className = "image-" + k;
        if (m < 1) {
          i++;
        }
        if (m < 2) {
          j++;
        }
        if (m < 3) {
          k++;
        }
        tID = setTimeout("start_slot()", spd);
      }

      function stop_slot() {

        if (m < 3) {
          m++;
          start_slot();
        }

        if (m > 2 && (i == j && j == k)) {
          alert("大当たり！やったね。");
        }

       ...

CSS

input[name=x], input[name=y], input[name=z] {
  display: none;
}

.image-frame {
  display: inline-block;
  background-color: white;
  background-image: url(https://via.placeholder.com/24x48?text=?);
  background-repeat: no-repeat;
  background-size: cover;
}

input + .image-frame {
  width: 24px;
  height: 48px;
}

input.image-0 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=+0+);
}

input.image-1 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=1);
}

input.image-2 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=2);
}

input.image-3 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=3);
}

input.image-4 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=4);
}

input.image-5 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=5);
}

input.image-6 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=6);
}

input.image-7 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=7);
}

input.image-8 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=8);
}

input.image-9 + .image-frame {
  background-image: url(https://via.placeholder.com/24x48?text=9);
}