JSFiddle - React, Tailwind, and code Playground

by Kriti

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;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
        border:green 2px solid;
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        overflow:hidden;
        background-color : red;
        width:75%;
        height:80px;
        border:black 2px solid;
        padding:5px;
    margin-right: auto;
    }
    #header1 {
        display:inline-block;
        width:35%;
        border:green 2px solid;
        background: red;
        vertical-align: middle;
    }
    #header2 {
        display:inline-block;
        width:50%;
        border:green 2px solid;
        background: red;
        vertical-align: middle;
    }