JSFiddle - React, Tailwind, and code Playground

by orrinward

HTML

<!-- header section -->
        <div id = "header">
            <ul id = "main-menu">
                <!-- no spaces between list elements when all on the same line! -->
                <li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li>
            </ul>

        </div> <!-- end of header section -->

CSS

/* header section */
#header {
    padding-left: 115px;
    margin-bottom: 10px;
}

#main-menu {
    list-style-type: none;
}

#main-menu li {
    border: 1px solid black;
    text-align: center;
    color: #666;
    font-family: "Lucida Console";
    font-variant: small-caps;
    letter-spacing: 2px;
    line-height: 45px;
    width: 153px;
    height: 45px;

    /* for  block layout */
    display: -moz-inline-box; /* for firefox */
    display: inline-block;
}

#main-menu a {
    display: block;
    height: 100%;
}

#main-menu a:link, a:visited {
    background-color: #eee;
}

#main-menu a:hover, a:active {
    background-color: #bbb;
}