JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="content">
        <div id="top">
            
        </div>
        <div class="dash"></div>
        <p id="header">Header</p>
       
        <div class="wrap">
        </div>
        <div class="wrap">
        </div>
    </div>
</div

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrapper {
    background-color: black;
    margin-top: 2%;
    width: 100%;
    height: auto;
}

#content {
    background-color: green;
    width: 1224px;
    height: auto;
    margin: auto;
    text-align: center;    
}

#top {
    background-color: pink;
    height: 400px;
    width: 60%;
    margin: auto;
}

.dash {
    width: 80%;
    margin: auto;
    margin-bottom: 1%;
    height: 2px;
    background-color: black;
}

p#header {
    margin: 0;
    text-align: center;
}

.wrap {
    background-color: orange;
    margin: 1%;
    float:left;
    width: 48%;
    height: 400px;
}