JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">about</a>
<a href="#">Store</a>
<a href="#">Blog</a>
<a href="#">pricing</a>
<a href="#">Contact</a>
</div>
</body>
</html>
CSS
body{
}
.nav{
background: transparent;
height: auto;
overflow: hidden;
position:relative
}
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 20px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
.nav a{
border: 1px solid #8F0222;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
display: block;
height: 15px;
color: #fff;
font-family: STFangsong;
text-decoration: none;
padding: 6px;
margin-left: 10px;
border-radius: 5px 5px 0px 0px;
float: left;
position: relative;
background: #a90329;
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(70%,#8f0222));
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 70%);
background: -o-linear-gradient(top, #a90329 0%,#8f0222 70%);
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 70%);
background: linear-gradient(top, #a90329 0%,#8f0222 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#8f0222',GradientType=0 );
}