JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<ul class="ml">
<li class="active"><span>day</span></li>
<li><span>week</span></li>
<li><span>month</span></li>
<li><span>year</span></li>
</ul>

CSS

.ml{
list-style-type:none;margin:0;padding:0;}
.ml li{display:inline-block;border:solid 1px #000;font-style:italic;padding:5px 10px;

position: relative
}

.ml li.active, .ml li:hover{
background:#000; color:#ffffff}

.ml li:after, .ml li span:after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 31px 5px;
  border-color: transparent transparent #f8f8f8 transparent;
}

.ml li:before, .ml li span:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  width: 0;
  height: 0;
  border-style: solid;
 border-width: 30px 5px 0 0;
    border-color: #000 transparent transparent transparent;
}

.ml li span:before{
  left: -1px;
  border-color: #F8F8F8 transparent transparent transparent;
}

.ml li span:after{
  right: -0.5px;
  border-color: transparent transparent #000 transparent;
}