JSFiddle - React, Tailwind, and code Playground

by Christopher Pearson

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<div class="listing-template">
    <div class="section-hdr">
        <img class="top-logo" src="http://i76.photobucket.com/albums/j39/christopherepearson1/Web%20Graphics/logo3_zpsa8816cd3.png" alt="logo" />
    </div>
    <div class="nav-bar">
        <ul>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Maternity-Fashion_W0QQfsubZ5511741012">maternity</a>

            </li>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a>

            </li>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a>

            </li>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a>

            </li>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a>

            </li>
            <li><a target="_blank" href="http://stores.ebay.com/doboyo_Household_W0QQfsubZ5511751012">houshold</a>

            </li>
            <li id="store-link"><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a>
            </li>
        </ul>
    </div>
</div>

CSS

.listing-template {
    max-width: 750px;
    background-color: #7496a7;
    border: 1px solid #000;
    margin-left: auto;
    margin-right: auto;
}
.listing-template .section-hdr {
    padding-top: 10px;
    padding-bottom: 0px;
}
.listing-template .section-hdr .top-logo {
    max-width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.listing-template .nav-bar {
    width: 700px;
    border: 0px solid #000;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.listing-template .nav-bar ul {
    padding-left: 0px;
    padding-right: 0px;
}
.listing-template .nav-bar a {
    color: #D7E3E9;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 8px;
    text-transform: uppercase;
}
.listing-template .nav-bar li {
    display:inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #D7E3E9;
}
.listing-template .nav-bar li:hover {
    background-color:#2B596F;
    border: 1px dotted #D7E3E9
}

#store-link {
    background-color:#2B596F;
}

#store-link:hover {
    background-color:#9e3754;
}