JSFiddle - React, Tailwind, and code Playground

by ericmorand

HTML

<div class="dashboard">
  Native resolution provided by the OS (1920x1200)
  <div class="checkerboard">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
   ...

CSS

.dashboard .interpolated,
.dashboard .checkerboard,
.dashboard .subtracted {
  display: flex;
  flex-direction: row;
  height: 200px;
  overflow: auto;
}

.dashboard .interpolated>div,
.dashboard .checkerboard>div,
.dashboard .subtracted>div {
  width: 10px;
  height: 100%;
  flex-shrink: 0;
}

.dashboard .checkerboard>div:nth-child(3n+1) {
  background-color: orangered;
}

.dashboard .checkerboard>div:nth-child(3n+2) {
  background-color: cadetblue;
}

.dashboard .checkerboard>div:nth-child(3n+3) {
  background-color: darkolivegreen;
}

.dashboard .interpolated>div:nth-child(9n+1),
.dashboard .interpolated>div:nth-child(9n+5) {
  background-color: orangered;
}

.dashboard .interpolated>div:nth-child(9n+2),
.dashboard .interpolated>div:nth-child(9n+7) {
  background-color: cadetblue;
}

.dashboard .interpolated>div:nth-child(9n+3) {
  background-color: #5a8568;
}

.dashboard .interpolated>div:nth-child(9n+4),
.dashboard .interpolated>div:nth-child(9n+8) {
  background-color: darkolivegreen;
}

.dashboard .interpolated>div:nth-child(9n+6) {
  background-color: #af7250;
}

.dashboard .interpolated>div:nth-child(9n+9) {
  background-color: #aa5818;
}

.dashboard .subtracted>div:nth-child(4n+1),
.dashboard .subtracted>div:nth-child(4n+3) {
  background-color: orangered;
}

.dashboard .subtracted>div:nth-child(4n+2),
.dashboard .subtracted>div:nth-child(4n+4) {
  background-color: #5a8568;
}