JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<div id="example-page" data-role="page">
    <div data-role="content">
        <div class="ui-grid-b ui-bar ui-bar-e">
            <div class="ui-block-a">1</div>
            <div class="ui-block-b">2</div>
            <div class="ui-block-c">3</div>

            <div class="ui-block-a">4</div>
            <div class="ui-block-b">5</div>
            <div class="ui-block-c">6</div>

            <div class="ui-block-a">7</div>
            <div class="ui-block-b">8</div>
            <div class="ui-block-c">9</div>

            <div class="ui-block-a">10</div>
            <div class="ui-block-b">12</div>
            <div class="ui-block-c">13</div>

            <div class="ui-block-a">14</div>
            <div class="ui-block-b">15</div>
            <div class="ui-block-c">16</div>
        </div>
    </div>
</div>

CSS

div[data-role="content"] {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

div.ui-grid-b {
    height: 75%;
}

.ui-block-a, .ui-block-b, .ui-block-c {
    height: 20%;
}