JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <title>project</title>
        <link rel="stylesheet" type="text/css"  href="indexstyle.css">
        </head>
    
    <body>
        <div id="base">
            <div class="dividiv" style="float:left;">
                <div class="maxdiv">
                    <div class="indiv">
                    </div>
                </div>
                <div class="maxdiv">
                </div>
            </div>
            <div class="dividiv" style="float:right;">
                <div class="largediv">
                </div>
                <div class="smalldiv" style="float:left;">
                </div>
                <div class="smalldiv" style="float:right;">
                </div>
                <div class="smalldiv" style="float:left;">
                </div>
                <div class="mindiv" style="float:right;">
                </div>
                <div class="mindiv" style="float:right;">
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#base{
    height:95%;
    width:90%;
    background-color:black;
    margin:0 auto;

}

.maxdiv{
    height:50%;
    width:100%;
    background-color:blue;
}

.largediv{
    height:33.33%;
    width:100%;
    background-color:red;
}
.smalldiv{
    height:33.33%;
    width:50%;
    background-color:grey;
}
.mindiv{
    height:16.66%;
    width:50%;
    background-color:yellow;
}
.indiv{
    margin:10px;
    background-color:red;
}
.dividiv{
    height:100%;
    width:50%;
    background-color:green;


}