JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div class="container">
    <div class="subcontainer">
        <div class="item">A</div>
        <div class="subcontainer">
            <div class="item">B</div>
            <div class="item">C</div>
        </div>
    </div>
    <div class="item">D</div>
    <div class="item item-large">E</div>
</div>

CSS

.container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: stretch;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.subcontainer {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    
    display: flex;
    flex-direction: column;
}


.item {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.item-large {
    -webkit-flex-grow: 2;
    flex-grow: 2;
}

.subcontainer {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}


@media screen and (min-width: 720px) {
    
}








.container {
    background: #FDF23E;
}

.subcontainer {
    background: #FA80A7;
    border: 3px solid blue;
}

.subcontainer .subcontainer {
    background: #FF3D84;
}

.item {
    background: #2FCE03;
    opacity: 0.3;
    border: 3px solid red;
}