JSFiddle - React, Tailwind, and code Playground
HTML
<div class="nav">
<a href="javascript:void(0);">Home</a>
<a href="javascript:void(0);">About</a>
<a class="highlight" href="javascript:void(0);">Services</a>
<a href="javascript:void(0);">Portfolio</a>
<a href="javascript:void(0);">Blog</a>
<a href="javascript:void(0);">Contact</a>
</div>
CSS
/*********************************************************************************************
Author: Abhimanyu Rana
Twitter: twitter.com/planetabhi
Dribbble: dribbble.com/planetabhi
*********************************************************************************************/
body {
background-color:#222930;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 62.5%
}
.nav {
margin:10%
}
.nav a {
background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent;
border: 1px solid #121212;
border-right: none;
box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
color: #777777;
cursor: pointer;
font-size: 14px;
line-height: 21px;
margin-left: -3px;
padding: 12px 20px;
text-decoration: none;
text-shadow: 0 -1px #0F0F0F;
vertical-align: top;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none
}
.nav a:hover {
color:#e9e9e9
}
.nav a:first-child {
border-radius: 6px 0 0 6px
}
.nav a:last-child {
border-radius: 0 6px 6px 0
}
.nav a:active {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1)
}
.nav a.highlight {
background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent;
color: #e9e9e9
}
.nav a:last-child {
border-right: 1px solid #121212;
}