JSFiddle - React, Tailwind, and code Playground

by Peter Hozák

HTML

<div class="grid1">
  <div class="grid2">
    <div class="grid3">
      <div class="grid4">
        <div class="grid5">
          <div class="grid6">
            <div class="grid7">
              <div class="grid8">
                <div class="grid9">
                  <div class="grid0"></div>
                </div>
                <div class="grid9"></div>
                <div class="grid9"></div>
                <div class="grid9"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
        <div class="grid5"></div>
      </div>
    </div>
    <div class="grid3">
      <div class="grid4">
        <div class="grid5"></div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
      </div>
      <div class="grid4">
        <div class="grid5"></div>
      </div>
    </div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
  <div class="grid2">
    <div class="grid3"></div>
  </div>
</div>

CSS

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: black;
  font-family: sans-serif;
  counter-reset: cnt;
}

div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  background: rgba(255, 155, 55, 0.1);
  min-height: 20px;
  transition: 200ms;
  color: black;
}

div:hover {
  grid-template-columns: 1fr;
}

div:empty::after {
  counter-increment: cnt;
  content: counter(cnt);
}