Новый туториал по Tabs

Задача

Создадим симпотичный интерфейс с табами для переключения контента на странице с использованием html, css, js.

HTML

<!DOCTYPE HTML PUBLIC>
<html lang="RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="index.css">
    <title>Justice Tabs</title>
</head>
<body>
<h1 class="title">Justice Tab Bar</h1>
<div class="container">
    <ul class="container__list">
        <li class="container__item container__item_active">
            <span class="container__link">Specialists</span>
        </li>
        <li class="container__item">
            <span class="container__link">Events</span>
        </li>
        <li class="container__item">
            <span class="container__link">Promotions</span>
        </li>
        <li class="container__item">
            <span class="container__link">Scrap paper</span>
        </li>
        <li class="container__item">
            <span class="container__link">FinTech</span>
        </li>
    </ul>
    <div class="container__inner">
        <h2 class="content__subtitle">Specialists</h2>
        <p class="content__description">
            There are more than 25 specialists in our team, the main value of our company is people.
            We value and respect everyone, invest various resources and develop together with our employees.
            Our current goals are continuous development and expansion. Together - we are a force!
        </p>
    </div>
    <div class="container__inner container__inner_hidden">
        <h2 class="content__subtitle">Training-events</h2>
        <p class="content__description">
            Our employees regularly take part in various trainings, where they are given the opportunity to improve their professional skills.
        </p>
    </div>
    <div class="container__inner container__inner_hidden">
        <h2 class="content__subtitle">“Green” promotions</h2>
        <p class="content__description">
            2 “green” promotions were held in cooperation with coffee houses. Our company has a successful experience of collaboration with coffee shops - green promotion.
            The action is aimed at raising peoples awareness in order to take care of the environment.
        </p>
    </div>
    <div class="container__inner container__inner_hidden">
        <h2 class="content__subtitle">Kg of scrap paper</h2>
        <p class="content__description">
            20kg of scrap paper and more than 100 PET bottles were recyclables. One of the main ideologies of our company is eco-responsibility. Our offices are equipped with special containers for sorting waste.
            Our employees share our views and help to make our planet cleaner!
        </p>
    </div>
    <div class="container__inner container__inner_hidden">
        <h2 class="content__subtitle">Completed FinTech</h2>
        <p class="content__description">
            Our main specialization is the FinTech and E-commerce industries. And today we can say with confidence about 15 successfully completed projects in this area.
        </p>
    </div>
</div>
</body>
<script src="index.js"></script>
</html>

let tabContent = document.querySelectorAll(".container__inner");
let tabItem = document.querySelectorAll(".container__item");

// For each element with class 'container__item'
for (let i = 0; i < tabItem.length; i++) {
	// if the element was hovered
	//you can replace mouseover with click
	tabItem[i].addEventListener("mouseover", () => {
		// Add to all containers class 'container__inner_hidden'
		tabContent.forEach((item) => {
			item.classList.add("container__inner_hidden");
		});
		// Clean all links from class 'container__item_active'
		tabItem.forEach((item) => {
			item.classList.remove("container__item_active");
		});
		// Make visible correct tab content and add class to item
		tabContent[i].classList.remove("container__inner_hidden");
		tabItem[i].classList.add("container__item_active");
	});
}

CSS

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Ubuntu", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(
            circle,
            rgba(239, 241, 173, 1) 3%,
            rgba(160, 195, 237, 1) 100%
    );
}

.title {
    margin: 30px 0;
    padding: 0;
    color: #4c6067;
    font-size: 36px;
    line-height: 36px;
    letter-spacing: 1px;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

.container {
    width: 100%;
    min-height: 270px;
    max-width: 800px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;
}

.container__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(1, minmax(min-content, max-content));
    grid-template-columns: repeat(5, minmax(min-content, max-content));
    grid-auto-rows: minmax(min-content, max-content);
    grid-auto-columns: minmax(min-content, max-content);
    justify-content: space-around;
    gap: 10px 20px;
}

.container__item {
    width: 100px;
    color: #4c6067;
    min-height: 30px;
    border-radius: 3px;
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    transition: 0.2s;
}

.container__item::after {
    content: "";
    display: block;
    position: absolute;
    width: 40%;
    margin: 0 30%;
    bottom: 0;
    border-bottom: 1px solid #4c6067;
}

.container__item_active {
    background: #4c6067;
    box-sizing: border-box;
    color: #ebfaff;
    font-weight: 300;
}

.container__link {
    margin: 0;
    padding: 0;
}

.container__inner {
    width: 80%;
    margin: 45px auto 35px;
}

.content__subtitle {
    animation-name: smoothTop;
    animation-duration: 0.3s;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    color: #404648;
}

.content__description {
    animation-name: smoothBottom;
    animation-duration: 0.7s;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    color: #404648;
}

.container__inner_hidden {
    display: none;
}

@keyframes smoothTop {
    0% {
        opacity: 0.2;
        transform: translateY(7%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes smoothBottom {
    0% {
        opacity: 0.2;
        transform: translateY(-3%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}