JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="folder">
  <fieldset role="tablist">
    <label role="tab"><input type="radio" name="folder-1" checked />Tab 1</label>
    <label role="tab"><input type="radio" name="folder-1" />Tab 2</label>
    <label role="tab"><input type="radio" name="folder-1" />Tab 3</label>
    <label role="tab"><input type="radio" name="folder-1" />Tab 4</label>
    <label role="tab"><input type="radio" name="folder-1" />Tab 5</label>
    <label role="tab"><input type="radio" name="folder-1" />Tab 6</label>
  </fieldset>
  <div class="view">
    <section role="tabpanel">View 1</section>
    <section role="tabpanel">View 2</section>
    <section role="tabpanel">View 3</section>
    <section role="tabpanel">View 4</section>
    <section role="tabpanel">View 5</section>
    <section role="tabpanel">View 6</section>
  </div>
</nav>

<nav class="folder">
  <fieldset role="tablist">
    <label role="tab"><input type="radio" name="folder-2" checked />Tab 1</label>
    <label role="tab"><input type="radio" name="folder-2" />Tab 2</label>
    <label role="tab"><input type="radio" name="folder-2" />Tab 3</label>
  </fieldset>
  <div class="view">
    <section role="tabpanel">View 1</section>
    <section role="tabpanel">View 2</section>
    <section role="tabpanel">View 3</section>
  </div>
</nav>

CSS

/* reset browser styles */
.folder,
.folder > [role="tablist"],
.folder > [role="tablist"] > [role="tab"]
.folder > .view,
.folder > .view > [role="tabpanel"]
{
  all: unset;
}

/* folder logic */

.folder > .view > [role="tabpanel"] {
  display: none;
}

.folder > [role="tablist"] > [role="tab"] > input[type="radio"] {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  z-index: -2;
}

.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(1)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(1),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(2)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(2),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(3)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(3),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(4)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(4),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(5)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(5),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(6)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(6),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(7)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(7),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(8)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(8),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(9)  > input:checked) > .view > [role="tabpanel"]:nth-of-type(9),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(10) > input:checked) > .view > [role="tabpanel"]:nth-of-type(10),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(11) > input:checked) > .view > [role="tabpanel"]:nth-of-type(11),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(12) > input:checked) > .view > [role="tabpanel"]:nth-of-type(12),
.folder:has(> [role="tablist"] > [role="tab"]:nth-of-type(13) > input:checked) > .view >...