JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<h1>Lots of tabs, works fine</h1>

<ul class="tabs">
    <li class="active"><a href="#" title="Active tab">Active tab</a>

    </li>
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a>

    </li>
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a>

    </li>
    <li><a href="#" title="Inactive tab 3">Inactive tab 3</a>

    </li>
    <li><a href="#" title="Inactive tab 4">Inactive tab 4</a>

    </li>
    <li><a href="#" title="Inactive tab 5">Inactive tab 5</a>

    </li>
    <li><a href="#" title="Inactive tab 6">Inactive tab 6</a>

    </li>
    <li><a href="#" title="Inactive tab 7">Inactive tab 7</a>

    </li>
    <li><a href="#" title="Inactive tab 8">Inactive tab 8</a>

    </li>
    <li><a href="#" title="Inactive tab 9">Inactive tab 9</a>

    </li>
    <li><a href="#" title="Inactive tab 10">Inactive tab 10</a>

    </li>
</ul>

<h1>Few of tabs, works not as expected</h1>

<ul class="tabs">
    <li class="active"><a href="#" title="Active tab">Active tab</a>

    </li>
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a>

    </li>
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a>

    </li>
</ul>

CSS

.tabs {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}
.tabs li {
    white-space: nowrap;
    min-width: 1rem;
    margin-right: .25rem;
}
.tabs li a {
    text-align: center;
    text-decoration: none;
    display: block;
    color: #979797;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tabs li.active a {
    background: #22234e;
    color: #fff;
}

.tabs li.active {
    min-width: auto !important;
}

.tabs li:not(.active):hover {
    background: #ccc;
}

JavaScript

document.querySelectorAll(".tabs li a").forEach(selector => selector.addEventListener("click", e => {
	document.querySelector(".tabs li.active").classList.remove("active");
  selector.parentNode.classList.add("active");
}))