JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<div id="a" class="red"></div>
<div id="b" class="blue"></div>
<div id="c" class="red">
    <div id="d" class="blue"></div>
</div>
<div id="e" class="blue"></div>
<div id="f" class="red"></div>
<div id="g" class="blue"></div>
<div id="h" class="red"></div>

CSS

div#wrapper {
    width: 100%;
}

div.red {
    width: 100%;
    background-color: red;
}

div.blue {
    width: 450px;
    margin: 0 calc(50% - 450px / 2);
    background-color: blue;
}

div.red > div.blue {
    background-color: green;
}

div#a, div#b, div#e, div#f {
    height: 50px;
}

div#c, div#d {
    height: 100px;
}

div#g, div#h {
    height: 200px;
}