JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div class="bar green"></div>
        <div class="bar greener"></div>
        <div class="bar greenest"></div>
        <div class="bar greenerest"></div>
    </div>

CSS

html, body, #wrapper, .bar {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    #wrapper {
        width: 50%;
    }

    .bar {
        float: left;
        width: 25%; /* must never add up to more than 100% */
    }

    .green {
        background-color: #a8ff00;
    }

    .greener {
        background-color: #7ad800;
    }

    .greenest {
        background-color: #3eb603;
    }

    .greenerest {
        background-color: #2c7e03;
    }