JSFiddle - React, Tailwind, and code Playground

HTML

<div id="green">
        <!--первый красный-->
        <div class="red" style="height: 200px" >
            <div class="blue square" style="margin: 10px 5px 10px 10px;"></div>
            <div class="blue" style="width: 620px; height: 170px; margin: 10px 5px 10px 5px;"></div>
            <div class="blue square" style="margin: 10px 10px 10px 5px;">
                <div class="yellowup"></div>
                <div class="yellowdown"></div>
            </div>
        </div>
        <!--второй красный-->
        <div class="red" style="height: 100px">
            <div class="blue rectanglesmall" style="margin: 10px 5px 10px 10px;"></div>
            <div class="blue rectanglesmall" style="margin: 10px 5px 10px 5px;"></div>
            <div class="blue rectanglesmall" style="margin: 10px 5px 10px 5px;"></div>
            <div class="blue rectanglesmall" style="margin: 10px 10px 10px 5px;"></div>
        </div>
        <!--третий красный-->
        <div class="red" style="height: 570px">
            <div id="bluelong"></div>
            <div id="bluewide">
                <div class="yellow" style="height: 390px"></div>
                <div class="yellow" style="height: 100px; margin: 0px 10px 10px 10px;"></div>
            </div>
        </div>
        <!--четвертый красный-->
        <div class="red" style="height: 200px; margin-bottom: 0px;">
            <div class="blue square" style="margin: 10px 5px 10px 10px;">
                <div class="yellowup"></div>
                <div class="yellowdown"></div>
            </div>
            <div class="blue" style="width: 620px; height: 170px; margin: 10px 5px 10px 5px;"></div>
            <div class="blue square" style="margin: 10px 10px 10px 5px;"></div>
        </div>
    </div>

CSS

div
        {
            border: 5px solid;
        }
        #green 
        {
            border-color: green;
            padding: 10px;
            width: 1100px;
            height: 1200px;
            margin: auto;
        }
        .red
        {
            border-color: red;
            width: 1090px;
            margin-bottom: 30px;
        }
        .blue
        {
            border-color:blue;
            float:left;
        }
        .blue.square 
        {
                width: 200px;
                height: 170px;
        }
        .yellowup 
        {
            border-color: yellow;
            width: 170px;
            height: 60px;
            margin: 10px 10px 10px 10px;
        }
        .yellowdown 
        {
            border-color: yellow;
            width: 170px;
            height: 60px;
            margin: 0px 10px 10px 10px;
        }
        .blue.rectanglesmall
        {
            width: 250px;
            height: 70px;
            float: left;
        }
        #bluelong 
        {
            width: 300px;
            height: 540px;
            border-color: blue;
            float: left;
            margin: 10px;
        }
        #bluewide 
        {
            width: 740px;
            height: 540px;
            float: left;
            border-color: blue;
            margin: 10px 10px 10px 0px;
        }
        .yellow
        {
            border-color: yellow;
            width: 710px;
            margin: 10px;
        }