JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="w100h100 grid2x1 bg-dark text-white">
    <div class="w100h100OH red gridDefault grid6000">
        <div class="w100h100OH green pos1">
            pos1
        </div>
        <div class="w100h100OH red pos2">
            pos2
        </div>
        <!--<div class="w100h100OH blue pos3">3</div>  -->
        <div class="w100h100OH yellow pos4">
            pos4
        </div>
        <div class="w100h100OH red pos5">
            pos5
        </div>
        <div class="w100h100OH blue pos6">
            pos6
        </div>
    </div>
    <div class="red flexg1 grid4x4">
        <div class="w100h100OH green">
            2pos1
        </div>
        <div class="w100h100OH green">
            2pos2
        </div>
        <div class="w100h100OH red">
            2pos3
        </div>
        <div class="w100h100OH blue">
            2pos4
        </div>
    </div>
</div>

SCSS

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: black;
    color:red;
    overflow-x: hidden;
    overflow-y: hidden;
   }
html {overflow-y:hidden;}
body {overflow-y:auto;}
   
.flexC {
    display:flex;
    flex-direction: column;
}

.flexR {
    display:flex;
    flex-direction: row;
}

.flexg1{
    flex-grow: 1;
}

.grid2x1{
    display: grid;
    grid-auto-rows: 100vh;
    grid-template-columns: repeat(auto-fit, minmax( 350px, 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);
}

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

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

.w100h100{
    width:100%;
    height:100%;
    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;
}
.yellow{background:rgb(24, 24, 24);
    box-sizing: border-box; }
.green{
    background:rgb(32, 32, 32);
    box-sizing: border-box;
}
.blue{ background:rgb(44, 44, 44);
    box-sizing: border-box;
}

.newdist  ::ng-deep  .divEolicaDetalle{ height:100%;}
.newdist ::ng-deep .divGenEolica {height:100%;}

/** GRID WITH NAMES 1900 dim **/
.gridDefault{
    display: grid;
    grid-template-columns: [start c-startcc c-start1hour] 3fr [c-middle] 1fr [c-end24h c-start1h] 2fr [c-end1h end];
    grid-template-rows: [start] 6fr [r-first r-start1h r-endMap] 2fr [r-end1h r-second] 4fr [end];

    .pos1{...