JSFiddle - React, Tailwind, and code Playground

HTML

<section id="nav">

            <div id="nav-wrapper">

                <ul id="nav-list">
                    <li id="nav-home"><a href="index.php">Home</a>
                    </li>
					<li id="nav-clothes"><a class="category All">Clothes</a>
                    </li>
                    <li id="nav-about"><a href="aboutus.php">About Us</a>
                    </li>
                    <li id="nav-contact"><a href="contactus.php">Contact Us</a>
                    </li>																			
                </ul>			

            </div>

        </section>

CSS

* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }