JSFiddle - React, Tailwind, and code Playground

by Marcos Nakamine

HTML

<div class="hex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 ...

CSS

.box {width:100%; height:10px; }
.hex {width:49%; float:left; }
.rgba {width:49%; float:right; }
.hex .box:nth-child( 1 ) {background-color:#00000000; }
.hex .box:nth-child( 2 ) {background-color:#00000001; }
.hex .box:nth-child( 3 ) {background-color:#00000002; }
.hex .box:nth-child( 4 ) {background-color:#00000003; }
.hex .box:nth-child( 5 ) {background-color:#00000004; }
.hex .box:nth-child( 6 ) {background-color:#00000005; }
.hex .box:nth-child( 7 ) {background-color:#00000006; }
.hex .box:nth-child( 8 ) {background-color:#00000007; }
.hex .box:nth-child( 9 ) {background-color:#00000008; }
.hex .box:nth-child( 10 ) {background-color:#00000009; }
.hex .box:nth-child( 11 ) {background-color:#0000000a; }
.hex .box:nth-child( 12 ) {background-color:#0000000b; }
.hex .box:nth-child( 13 ) {background-color:#0000000c; }
.hex .box:nth-child( 14 ) {background-color:#0000000d; }
.hex .box:nth-child( 15 ) {background-color:#0000000e; }
.hex .box:nth-child( 16 ) {background-color:#0000000f; }
.hex .box:nth-child( 17 ) {background-color:#00000010; }
.hex .box:nth-child( 18 ) {background-color:#00000011; }
.hex .box:nth-child( 19 ) {background-color:#00000012; }
.hex .box:nth-child( 20 ) {background-color:#00000013; }
.hex .box:nth-child( 21 ) {background-color:#00000014; }
.hex .box:nth-child( 22 ) {background-color:#00000015; }
.hex .box:nth-child( 23 ) {background-color:#00000016; }
.hex .box:nth-child( 24 ) {background-color:#00000017; }
.hex .box:nth-child( 25 ) {background-color:#00000018; }
.hex .box:nth-child( 26 ) {background-color:#00000019; }
.hex .box:nth-child( 27 ) {background-color:#0000001a; }
.hex .box:nth-child( 28 ) {background-color:#0000001b; }
.hex .box:nth-child( 29 ) {background-color:#0000001c; }
.hex .box:nth-child( 30 ) {background-color:#0000001d; }
.hex .box:nth-child( 31 ) {background-color:#0000001e; }
.hex .box:nth-child( 32 ) {background-color:#0000001f; }
.hex .box:nth-child( 33 ) {background-color:#00000020; }
.hex .box:nth-child( 34 )...