JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li tabindex="1">Вкладка</li>
    <li tabindex="2">Вкладка</li>
    <li tabindex="3">Вкладка</li>
    <li tabindex="4">Вкладка</li>
    <li tabindex="5">Вкладка</li>
    <li tabindex="6">Вкладка</li>
    <li tabindex="7">Вкладка</li>
    <li tabindex="8">Вкладка</li>
    <li tabindex="9">Вкладка</li>
</ul>

CSS

ul { margin: 20px; }
li { float: left; padding: 2px 10px; border: 1px solid blue; background: #ccc; position: relative; }

li::before, li:focus::after, li:focus ~ li::after, li:last-child::after {
    display: block;
    content: '';
    background: #ccc;
    border: solid blue;
    width: 5px;
    height: 100%;
    position: absolute;
    z-index: 99;
    top: -1px;
}
li:focus ~ li::before{
    content: none;        
}
li::before {
    border-width: 1px 0 1px 1px;
    border-radius: 5px 0 0 0;
    left: -5px;
    box-shadow: -2px 1px 3px -2px rgba(0,0,0,1);
}
li:focus::after, li:focus ~ li::after, li:last-child::after {
    border-width: 1px 1px 1px 0;
    border-radius: 0 5px 0 0;
    right: -5px;
    box-shadow: 2px 1px 3px -2px rgba(0,0,0,1);
}

li:focus { margin-top: -4px; padding: 4px 10px 5px; background: #fff; outline: none; border-bottom: 0; }
li:focus::before, li:focus::after { background: #fff; border-bottom: 0; }