JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="grid2x1 bg-dark text-white">
    <div class="w100h100OH red grid6x7">
        <div class="w100h100OH green pos1">1
        </div>
        <div class="w100h100OH red pos2">2
        </div>
        <div class="w100h100OH green pos4">4
        </div>
        <div class="w100h100OH red pos5">5
        </div>
        <div class="w100h100OH blue pos6">6
        </div>
    </div>
    <div class="red flexg1 grid4x4">
        <div class="w100h100OH green">1b
        </div>
        <div class="w100h100OH red">2b
        </div>
        <div class="w100h100OH red">3b
        </div>
        <div class="w100h100OH blue">4b
        </div>
    </div>
</div>

CSS

html, body{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  overflow-x:hidden;
  overflow-y:hidden;
  color:white;
  background:#000;
}
html body{
  overflow-y:auto;
}

/** SCROLL **/
* {
  scrollbar-color: #666 #333;
  scrollbar-width: thin;
}

*::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333;
}

*::-webkit-scrollbar{
    width: 7px;
    background-color: #F5F5F5;
}

*::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #666;
}

/** GRID **/
.grid2x1{
    width:100%;
    grid-auto-flow: row;
    grid-auto-rows: 100vh;
    display: grid;
   /*grid-template-columns: 1fr 1fr;*/
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  
}
.grid4x4{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid6x6{
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);
}

.grid6x7{
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(6, 1fr);
}

.w100h100OH{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    margin:0px;
    padding:0px;
}

.border4 {
    border:4px solid rgba(0,0,0,0.4);
}
.red{
    background:rgb(12, 12, 12);
    box-sizing: border-box;
}

.green{
    background:rgb(32, 32, 32);
    box-sizing: border-box;
}
.blue{ background:rgb(44, 44, 44);
    box-sizing: border-box;
}

/** 6 x 7 distribution */
.pos1{
    grid-column-start: 1;
    grid-column-end:   4;
    grid-row-start: 1;
    grid-row-end:   4;
}
/*
.pos3{
    grid-column-start: 1;
    grid-column-end:   4;
    grid-row-start: 3;
    grid-row-end:   4;
}*/
.pos2{
    grid-column-start: 4;
    grid-column-end:   7;
    grid-row-start: 1;
    grid-row-end:   4;
}
.pos4{
    grid-column-start: 1;
    grid-column-end:   5;
    grid-row-start: 4;
    grid-row-end:   6;
}

.pos5{
   ...