JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<div id="container">
    <div id="header">
        <div id="navbar"></div>
    </div>
    <div id="topper">This is the Topper</div>
      <div id="cols">
        <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>
     <div class="clear"></div>
    <div id="footer">This is the footer</div>
</div>

CSS

#container
{
    background-color:#CCC;
   float:left;
    width: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;
}
#cols{
    margin:0 auto;
    width:70%;
}
#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;
}
.clear{clear:both;}
#footer
{
    margin:0 auto;
    width:70%;
}