JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="yellow_menu">
     <li>
            <a href="#">Чокопай</a>
    </li>
      <li>
            <a href="#">Чокобой</a>
      </li>
      <li>
            <a href="#">Крекер ГУТЭ</a>
       </li>
        <li class="yellow_active">
              <a href="#">Марин бой</a>
        </li>
        <li>
               <a href="#">Другое печенье</a>
        </li>
</ul>

CSS

*{
    margin:0;
    padding:0;
}
a{
    color:#fff;
    border-right-style:dashed; 
    border-right-width:1px;
    padding:4px 16px;
}
li:last-child a{border-right:none;}
ul{
    list-style:none;
}
ul li{
    float:left;
    padding:7px 0;
    background-color:#eb0106;
    height:40px;
    line-height:40px;
}
ul li{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAGCAYAAAAooAWeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAuElEQVR42mI8yc73nwEPYObhZlCYPIFBODIMRfzX48cMN9x9GX7cu49TLyM+w9mkpRi0Du5hYJORxq7g/3+Gu/EpDB+2bWf4++UrhjQTLoNZhIUZ9C6dxW0wAwMDAyMjg/KiuQx8Ls5YpZlwBYXOycMMTNxcDMQA1RWLGbj0dAkbzizAz6C2cS1+F2MB2kf3M3DpaqN67IywJEqYax87yMChpspAFvj/n+GKmTXDz/sPGBgYGBgAAwCviS2aWBWNgAAAAABJRU5ErkJggg==');
    background-position: 50% 100%;
    background-repeat:repeat-x;}
li.yellow_active{
    padding-bottom:25px;
    position:relative;
}
li.yellow_active a{
    line-height:32px;
    height:17px;
    display:flex;
    margin-top:8px;
}



li.yellow_active:before,li.yellow_active:after{position:absolute;display:block;content:"";}
li.yellow_active:before{
  width:28px;height:28px;left:50%;bottom:-14px;margin-left:-14px;
  background:#fff;
  border-bottom:10px solid #282E3A; 
  border-left:9px solid transparent; 
  border-right:9px solid transparent;
  border-radius:50%;border:1px solid #eb0106;
}
li.yellow_active:after {
  background: #282E3A;
  width:0;height:0;left:50%;margin:29px 0 0 -4.8px;
  background:none;
  border-top:7px solid red; 
  border-left:6px solid...