JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>                  
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>

CSS

*{
        margin:0px;
        padding:0px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;    
        box-sizing: border-box;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        margin:10px auto;
        background-color : red;
        width:70%;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
           text-align:center; 
    }
    #header1 {  
        display:inline-block;
        line-height:80px;
        margin: 0 10px;    
    }
    #header2 {
        display:inline-block;
        line-height:80px;
        margin: 0 10px;    
    }
    #navmenu {
        list-style-type:none;
        background-color:#444;
        border:black 2px solid;         
        text-align:center;
        margin-bottom:20px;
    }
    #content {
    }
    #nav {
    }
    #navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        line-height:30px;
        width:33.33%;
        display:inline-block
    }
    #navmenu li a {
        text-decoration:none;           
        display:block;
    }