JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper-top">
    <div class="wrapper">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">block-1-1</div>
            <div class="block-3-1">block-3-1</div>
            <div class="block-3-2">block-3-2</div>
            <div class="block-3-3">block-3-3</div>
        </div>
    </div>
</div>

CSS

#wrapper-top
{
    width: 100%;
    background-color: gray;
    border: solid blue 1px;
}
.wrapper
{
    margin: 0 150px 0 150px;
    border: solid brown 1px;
}
#logo
{
    width: 100%;
    background-color: white;
}
#menu
{
    width: 100%;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}