JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<div class="wrapper">
  <div class="grid">
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
...

CSS

.wrapper {
  position: fixed;
  width: 100%; height: 100%;
  left: 0; top: 0;
  text-align: center;
}
.wrapper:before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 0; height: 100%;
}
.wrapper > .grid {
  display: inline-block;
  vertical-align: middle;
}
.grid > .row {
  font-size: 0;
  width: 100px;
  white-space: nowrap;
}
.grid > .row > .cell {
  position: relative;
  display: inline-block;
  width: 10px; height: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.3);
}
.grid > .row > .cell:hover {
  background-color: red;
}

.grid {
  transform: rotateX(40deg) rotateZ(45deg);


}