JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<ul id="nav">
    <li><a href="#">News</a></li>
    <li><a href="#">Education</a></li>
    <li><a href="#">Research</a></li>
    <li><a href="#">Patient Care</a></li>
</ul>

CSS

#nav {
    background: transparent;
    background-image: -webkit-linear-gradient(#075a43, #11896b);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(16, 122, 96, 0.7);
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0 20px;
}
#nav li {
    float: left;
}
#nav a {
    background-image: -webkit-radial-gradient(center 40px, #0d755a 30%, #044c38);
    border-right: 1px solid #139574;
    color: #fff;
    display: block;
    font: bold 15px/37px Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    width: 129px; 
}
#nav li:hover {
    background-image: -webkit-radial-gradient(center 40px, #17c597 30%, #0c7e60);
}
#nav a:hover {
    background: transparent -webkit-linear-gradient(transparent 40%, rgba(0,0,0,0.05) 40%) no-repeat 0 0;
}