JSFiddle - React, Tailwind, and code Playground

by nimishgoel056

HTML

<div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>
<div class="small-col">
    <div id="row-1-left" class="small-row"></div>
    <div id="row-2-left" class="small-row"></div>
    <div id="row-3-left" class="small-row"></div>
    <div id="row-4-left" class="small-row"></div>
    <div id="row-5-left" class="small-row"></div>
    <div id="row-6-left" class="small-row"></div>
    <div id="row-7-left" class="small-row"></div>
    <div id="row-8-left" class="small-row"></div>
    
</div>
<div class="small-col">
    <div id="row-1-right" class="small-row"></div>
    <div id="row-2-right" class="small-row"></div>
    <div id="row-3-right" class="small-row"></div>
    <div id="row-4-right" class="small-row"></div>
    <div id="row-5-right" class="small-row"></div>
    <div id="row-6-right" class="small-row"></div>
    <div id="row-7-right" class="small-row"></div>
    <div id="row-8-right" class="small-row"></div>
</div>
<div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>

CSS

.big-col {
float: left;
}

.small-col {
float: left;
}

.big-row {
width: 200px;
height: 100px;     
}

.blue {
background-color: blue;
}

.green {
background-color: green;
}

.small-row {
width: 40px;
height: 50px;     
}

#row-1-left {
border-bottom: 1px solid orange;
}

#row-5-right {
border-bottom: 1px solid orange;
}

#row-2-right, #row-3-right, #row-4-right, #row-5-right {
border-left: 1px solid orange;
}