JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="main-menu">
    <ul class="custom-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

.main-menu {
height:55px;
    width:400px;
border:2px solid #009900;
background-color:#3E3E3E;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
position: relative; }

ul.custom-menu{margin:2px auto;}

ul.custom-menu li{
list-style-type:none;
    display:inline-block;
}
ul.custom-menu li a {
padding:0 11px;
    margin:0;
display:block;
text-decoration:none;
font-size:14px;
color:#CCCCCC;
margin-bottom:0px;
text-shadow:#454545;
background-color:#3E3E3E;
line-height:50px;

min-width:70px;} 

ul.custom-menu li a:hover {
display:block;
text-decoration:none;
font-size:14px;
color:#111111;
margin-bottom:0px;
text-shadow:#111111;
background-color:#009900;
} 
ul.custom-menu li:first-child a:first-child{border-radius: 10px 0px 0px 10px;margin-left:0}
ul.custom-menu li:last-child a:last-child{border-radius: 0px 10px 10px 0px;}