JSFiddle - React, Tailwind, and code Playground

by Mykhailo Miroshnikov

HTML

<div id="container">
    <div id="header">
        <div id="navbar"></div>
    </div>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div id="footer">This is the footer</div>
    </div>

CSS

#container
{
    background-color:#CCC;
    min-height:100%;
}
#header
{
    background-color: #000;
    width:100%;
    float:left;
}
#navbar
{
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper
{
    background-color:#000;
    height: 175px;
}
#colone
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree
{
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

#footer
{
    clear: both;
}
#container {
    overflow: hidden;
}