JSFiddle - React, Tailwind, and code Playground

by jmjpro

HTML

<div id="navigation">
    <div id="nav-holder">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS

#navigation
{
    display: table; 
    height: 35px; 
    width: 100%;
    #position: relative; 
    overflow: hidden;
    background: Black;
}

#nav-holder
{
    #position: absolute; 
    #top: 50%;
    display: table-cell; 
    vertical-align: middle;
}

#navigation ul
{
    #position: relative; 
    #top: -50%; 
}

#navigation ul li
{
    float: left;
}

#navigation ul li a
{
    padding: 5px 10px;
    margin-left: 2px;
    background-color: Red;

    text-decoration: none;
    font-family: Verdana;
    color: White;
}