JSFiddle - React, Tailwind, and code Playground

by hronic

HTML

<div class="menu">
  <ul>
    <li ><a href="#">menu 1</a> </li>
    <li><a href="#">menu 2</a> </li>
    <li  class="active"><a href="#">menu 3</a>  </li>
    <li><a href="#">menu 4</a>  </li>
  </ul>
</div>

CSS

.menu {
  display: inline-block;
  padding: 0px 0 20px 0;
  width: 100%;
 // margin-top: 50px;
  background-color: green;
  box-shadow: inset 2px 4px 12px rgba(0, 0, 0, .4);
}
ul {
}
ul li {
 list-style-type: none;
 float: left;
 padding: 15px;
 //background-color: rgba(255,255,255,0.2);
}
ul li a {
  text-decoration: none;
  margin:0;
  border: 0;
}
ul li a:hover {
  text-decoration: none;
}
ul li:hover {
  cursor: pointer;
  background-color: rgba(0,0,0,0.2)
}
.active {
  z-index: 900;
  padding-left: -55px;
  background-color: rgba(255,255,255,0.2);
}
.active::before, .active::after {
  content: "";
  position: relative;
}
.active::before {
  width: 0;
	height: 0;
  left: 50px;
  top: -5px;
  border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 40px solid green;
}
.active::after {
  width: 0;
	height: 0;
  left: -62px;
  top: 5px;
  border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 30px solid white;
}