JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<div class="container">

    <div class="first">first</div>
    <div class="second">second</div>
    <div class="third">third</div>
    <div class="fourth">fourth</div>
    <div class="fifth">fifth</div>
    <div class="sixth">sixth</div>
    <div class="seventh">seventh</div>
</div>

CSS

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.first {
    float: left;
    width: 25%;
    height: 25%;
    background-color: orange;
}

.second{
    float: left;
    width: 25%;
    height: 25%;
    background-color: red;
}


.third{
    float: left;
    width: 50%;
    height: 25%;
    background-color: grey;
}

.fourth {
    float: left;
    width: 25%;
    height: 50%;
    background-color: blue;
}

.fifth {
    float: left;
    width: 50%;
    height: 50%;
    background-color: green;
}

.sixth {
    float: left;
    width: 25%;
    height: 25%;
    background-color: teal;
}
.seventh {
    float: left;
    width: 25%;
    height: 25%;
    background-color: grey;
}