JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="green">
        <div class="red height200">
            <div class="blue square"></div>
            <div class="blue square" style="width: 620px; height: 170px;"></div>
            <div class="blue square"></div>
        </div>
        <div class="red" style="height: 100px"></div>
        <div class="red" style="height: 570px"></div>
        <div class="red height200" style="margin-bottom: 0px;"></div>
    </div>
</body>

CSS

div 
        {
            border: 5px solid;
        }
        #green 
        {
            border-color: green;
            margin: auto;
            width: 1100px;
            height: 1200px;
            padding: 10px;
        }
        .red
        {
            border-color: red;
            margin-bottom: 30px;
        }
        .red.height200
        {
            height: 200px;
        }
        .blue
        {
            margin: 10px;
            padding: 5px;
            border-color: blue;
            float: left;
        }
        .blue 
        {
            border-color: blue;
            float: left;
        }

        .blue.square 
        {
            width: 200px;
            height: 170px;
        }