JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
                        <li  class="active">
                            <div class="marker"><div class="marker-inner"></div></div>
                            All
                        </li>
                        <li  >
                            <div class="marker"><div class="marker-inner"></div></div>
                            Most Popular
                        </li>
                        <li  >
                            <div class="marker"><div class="marker-inner"></div></div>
                           Favourites1
                        </li>
                        <li  >
                            <div class="marker"><div class="marker-inner"></div></div>
                            Ranking
                        </li>
                    </ul>

CSS

ul li {
  height: 30px;
  cursor: pointer;
  line-height: 18px;
}

 ul li .marker {
  width: 10px;
  height: 10px;
  background-color: white;
  padding: 4px;
  float: left;
  margin-right: 10px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}

 ul li .marker .marker-inner {
  width: 10px;
  height: 10px;
  background-color: white;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9ba8af), color-stop(100%, #294552));
  background-image: -webkit-linear-gradient(#9ba8af, #294552);
  background-image: -moz-linear-gradient(#9ba8af, #294552);
  background-image: -o-linear-gradient(#9ba8af, #294552);
  background-image: -ms-linear-gradient(#9ba8af, #294552);
  background-image: linear-gradient(#9ba8af, #294552);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF9BA8AF', endColorstr='#FF294552');
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

ul li.active .marker .marker-inner {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}