JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<header>
<img src="logo.png">
    My Website Title
    <div id="nav">
        Home | Mens...
    </div>
</header>  
<div id="pagecontainer">
    <section>
        <div id="smallcontainer">
            <div class="fancydresssmall">
                Fancy Dress
            </div>
            <div class="fancydresssmall">
                Fancy Dress
            </div>
        </div>
        <div class="fancydresslong">
            Fancy Dress Long
        </div>
        <div class="fancydresslarge">
            Fancy Dress Large
        </div>
    </section>
    <section>
    <div class="fancydresswide">
        Fancy Dress Wide
    </div>
    <div class="sale">
        Sale!
    </div>
    </section>
</div>
</body>

CSS

header {
    min-height: 10em;
}

#pagecontainer {
    min-height: 40em;
}

section {
    min-height: 20em;
    padding: 0.5em;
}

#smallcontainer {
    min-height: 20em;
    width: 30%;
    float: left;
}

.fancydresssmall {
    min-height: 10em;
    background-color: yellow;
}

.fancydresslong {
    min-height: 20em;
    width: 30%;
    float: left;
    background-color: purple;
}

.fancydresslarge {
    width: 40%;
    float: left;
    background-color: green;
    min-height: 20em;
}

.fancydresswide {
    min-height: 20em;
    width: 60%;
    float: left;
    background-color: orange;
}

.sale {
    min-height: 20em;
    float: left;
    width: 40%;
    background-color: red;
}