JSFiddle - React, Tailwind, and code Playground

by Bryan Dellinger

HTML

<div id="nav">
                <ul id=mainNav>
                    <li class=mainNav><a>Home</a></li>
                    <li class=mainNav><a>Products</a></li>
                    <li class=mainNav><a>Stores</a></li>
                    <li class=mainNav><a>About Us</a></li>
                    <li class=mainNav><a>Contact Us</a></li>
                    <li class=mainNav><a>Pet Pics</a></li>
                </ul>
            </div>

        </div>

        <div id="subBar">

            <div id="subNav">
            <ul id=subNavl>
                    <li class=subNav><a>Home</a></li>
                    <li class=subNav><a>Products</a></li>
                    <li class=subNav><a>Stores</a></li>
                    <li class=subNav><a>About Us</a></li>
                    <li class=subNav><a>Contact Us</a></li>
                    <li class=subNav><a>Pet Pics</a></li>
                </ul>

            </div>

        </div>

CSS

#header{
    width:1000px;
    background-color:#B443B7;
    border-radius:200px;
    height:50px;
    margin:auto;
    margin-top:0px;
    margin-bottom:opx;
    }


h1{
    display:inline;
    color:white;
    margin-left:20px;
    font-family: 'Indie Flower', cursive;
    }

h1, a{
    text-decoration:none;
    color:#B443B7;  
    margin-top:auto;
    margin-bottom:60px;
    }



    #subBar {
       

        }

#nav {
    margin:auto;
    }

#subNav {
    margin:auto;    
}

#mainNav {
    list-style-type:none;
}

.mainNav {
    display:inline

}

.mainNav a {
    display:inline-block;
    height:35px;
    padding-top:15px;
    color:white;
    width:100px;
    text-align:center;
    font-family:arial, sans-serif;
    font-size:16px;
}

.mainNav a:hover{
    background-color:#F4F459;
    color:black;
}

#subNavl {
    list-style-type:none;
     height:20px;
        padding-top:10px;
        width:875px;
        margin-right:auto;
        margin-left:auto;
        background-color:#F4F459;
        color:black;
        border-radius: 0px 0px 200px 200px;
}

.subNav {
    display:inline

}

.subNav a {
    display:inline-block;
    height:30px;
    margin-top:0px;
    padding-top:0px;
    color:black;
    width:80px;
    text-align:center;
    font-family:arial, sans-serif;
    font-size:16px;
}