JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="game">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

body {
  font-size: 20vw;
  margin: 0;
}

@media screen and (max-aspect-ratio: 3/5) {
  body {
    font-size: 20vh;
  }
}

#game {
  width: 5em;
  height: 3em;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  overflow: auto;
}

.item {
  width: 1em;
  height: 1em;
  box-shadow: inset 0 0 0 1px white;
  background: #558899;
}