JSFiddle - React, Tailwind, and code Playground

by Furry Cat

HTML

<div class="container">
    <ul class="tab-title">
        <li>Закладка 1</li>
        <li>Закладка 2</li>
        <li>Закладка 3</li>
        <li>Закладка 4</li>
        <li>Закладка 5</li>
    </ul>

    <ul class="tab-content">
        <li>Контент закладки 1</li>
        <li>Контент закладки 2</li>
        <li>Контент закладки 3</li>
        <li>Контент закладки 4</li>
        <li>Контент закладки 5</li>
    </ul>
</div>

CSS

*{margin:0;padding:0;box-sizing: border-box;border:0;outline: 0;}
		.tab-title,.tab-content{
            list-style:none;
        }
        .container{
            font-family:sans-serif;
            margin-top:50px;
        }
        .tab-title{
            display:flex;
            flex-direction: row;
            justify-content: space-around;
            padding:15px;
            border-bottom:2px solid #ccc;
        }
        .tab-title li{
            font-size:14px;
            color:#666;
            font-weight: bold;
            cursor:pointer;
            padding:5px;
        }
        .tab-title li:hover{
            box-shadow: 0 -5px 0px  -2px #ccc;
        }
        .tab-title li.active{
            color:red;
            box-shadow:0 -5px 0px -2px red;
        }
        .tab-content li{
          display:none;
            text-align:center;
            padding:5px;
            margin:10px;
        }

JavaScript

$(function(){

$('.tab-title li').not('.active').click(function(){
    var index = $(this).index();
    var content = $('.tab-content li').eq(index);
    $(this).addClass('active').siblings().removeClass('active');
    $('.tab-content li').css('display', 'none').eq(index).css('display', 'block');
})

    $('.tab-title li:first').addClass('active');
    $('.tab-content li:first').css('display', 'block');

})