JSFiddle - React, Tailwind, and code Playground

by jspence29

HTML

<div id="menu" class="bottomshadow">
		<ul class="main_menu">
			<li id="homebutton"> <a href="#">Home </a></li>
			<li id="servicebutton"> <a href="services.html" >Services </a></li>
			<li id="packagebutton"> <a href="packages.html" >Packages </a></li>
			<li id="productbutton"> <a href="#">Products </a></li>
			<li id="mebutton"> <a href="#">About Me </a></li>
    </div>

CSS

#menu  {
    height: 60px;
    width: 100%;
    background: #AEAEAE;
    margin: 25px auto;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #fff;
    border-bottom-color: #fff;
    padding: 8px 0px;
}
#main-wrapper {
    width: 900px;
    margin: 0 auto;
}
ul.main_menu  {
    list-style-type: none;
    text-align: center;
}
ul.main_menu li  {
    margin-left: 20px;
    display: inline;
}
ul.main_menu li a  {
    text-decoration: none;
    color: white;
    font-size: 18px;
    margin: 3px;
}
ul.main_menu li a:first-child:hover  {
    font-size: 20px;
    margin: 1px;
}
ul.main_menu li a:nth-child(2):hover  {
    font-size: 20px;
    margin: 1px;
}
ul.main_menu li a:nth-child(3):hover  {
    font-size: 20px;
    margin: 1px;
}
ul.main_menu li a:nth-child(4):hover  {
    font-size: 20px;
    margin: 1px;
}
ul.main_menu li a:nth-child(5):hover  {
    font-size: 20px;
    margin: 1px;
}