JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <nav>
        <ul>
            <li>blah</li>    
            <li>blah</li>    
            <li>blah</li>    
            <li>blah</li>    
            <li>blah</li>    
            
        </ul>
    </nav>
    <header> Sporting Goods</header>
<section>
    
    <article id="sg-banner" class="bkg">
    </article>            
    <article id="sg-activity" class="bkg">
    </article>
    <article id="sg-pop-cat"class="bkg">
    </article>       
    <article id="sg-our-picks" class="merch bkg">
    </article>    
    <article id="sg-best-serllers" class="merch bkg">
    </article>    
    <article id="sg-daily-deals" class="merch bkg">
    </article>
    
    

</section> 
<footer>
    Sporting Goods Footer
    </footer>
</div>

CSS

header, footer{
    font-weight: bold;
}

section{
    margin-left: 220px;        
}



.bkg {
    background-color: pink;
    border: 1px solid black;
    height: 50px;
    width: 100%;
}


nav{
    float: left;
    width: 210px;
    background-color: #eee;
    border: 1px solid black;
    margin-top: 20px;
}