JSFiddle - React, Tailwind, and code Playground

by ivanovsuper

HTML

<ul>
    <li class="active"><a href="#about">О нас</a></li>
    <li><a href="#protfolio">Портфолио</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#feedback">Отзывы</a></li>
  </ul>

CSS

a {text-decoration:none;font-style:italic;font-size:1.4em}
    ul {background: #BB73BD;z-index:-100}
    li {
        display: inline-block; 
        overflow: visible;
        padding-left:1em;
        padding-right: 1em;
        line-height:2em;
        margin:10px;
    }
    li a {color:white; text-shadow: 1px 1px #9b5c9c}
    li.active a {color:#BB73BD;text-shadow:none }
    li.active {
        display: inline-block; 
        background:white;
        margin: 0 0.75em;
        overflow: visible;
        padding-left:1em;
        padding-right: 1em;
        line-height:2em;
        box-shadow: 1px 1px 0 #9b5c9c;
        margin:10px;
        border-radius:2px;
    }
    li.active:before, li.active:after {
      content:'';
      position:absolute;
      width:0.5em;
      height:1em;
      background:white;
        margin:10px;
    }
    li.active:before {
      border-radius:0.5em 0 0 0.5em;
      margin-left: -1.5em;
    }
    li.active:after {
      border-radius:0 0.5em 0.5em 0;
      margin-left: 1em;
        box-shadow: 1px 1px 0 #9b5c9c;
    }

JavaScript

$("li a").click(function(){
        $("li").removeClass("active");
        $(this).parent().addClass("active");
      });