JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="folder">
  <input type="radio" id="folder-1-tab-1" name="folder-1" checked />
  <input type="radio" id="folder-1-tab-2" name="folder-1" />
  <input type="radio" id="folder-1-tab-3" name="folder-1" />
  <input type="radio" id="folder-1-tab-4" name="folder-1" />
  <input type="radio" id="folder-1-tab-5" name="folder-1" />
  <input type="radio" id="folder-1-tab-6" name="folder-1" />
  <fieldset role="tablist">
    <label role="tab" for="folder-1-tab-1">Tab 1</label>
    <label role="tab" for="folder-1-tab-2">Tab 2</label>
    <label role="tab" for="folder-1-tab-3">Tab 3</label>
    <label role="tab" for="folder-1-tab-4">Tab 4</label>
    <label role="tab" for="folder-1-tab-5">Tab 5</label>
    <label role="tab" for="folder-1-tab-6">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">
  <input type="radio" id="folder-2-tab-1" name="folder-2" checked />
  <input type="radio" id="folder-2-tab-2" name="folder-2" />
  <input type="radio" id="folder-2-tab-3" name="folder-2" />
  <fieldset role="tablist">
    <label role="tab" for="folder-2-tab-1">Tab 1</label>
    <label role="tab" for="folder-2-tab-2">Tab 2</label>
    <label role="tab" for="folder-2-tab-3">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 > input[type="radio"] {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  z-index: -2;
}

.folder input:nth-of-type(1):checked ~ .view > [role="tabpanel"]:nth-of-type(1),
.folder input:nth-of-type(2):checked ~ .view > [role="tabpanel"]:nth-of-type(2),
.folder input:nth-of-type(3):checked ~ .view > [role="tabpanel"]:nth-of-type(3),
.folder input:nth-of-type(4):checked ~ .view > [role="tabpanel"]:nth-of-type(4),
.folder input:nth-of-type(5):checked ~ .view > [role="tabpanel"]:nth-of-type(5),
.folder input:nth-of-type(6):checked ~ .view > [role="tabpanel"]:nth-of-type(6),
.folder input:nth-of-type(7):checked ~ .view > [role="tabpanel"]:nth-of-type(7),
.folder input:nth-of-type(8):checked ~ .view > [role="tabpanel"]:nth-of-type(8),
.folder input:nth-of-type(9):checked ~ .view > [role="tabpanel"]:nth-of-type(9),
.folder input:nth-of-type(10):checked ~ .view > [role="tabpanel"]:nth-of-type(10),
.folder input:nth-of-type(11):checked ~ .view > [role="tabpanel"]:nth-of-type(11),
.folder input:nth-of-type(12):checked ~ .view > [role="tabpanel"]:nth-of-type(12),
.folder input:nth-of-type(13):checked ~ .view > [role="tabpanel"]:nth-of-type(13),
.folder input:nth-of-type(14):checked ~ .view > [role="tabpanel"]:nth-of-type(14),
.folder input:nth-of-type(15):checked ~ .view > [role="tabpanel"]:nth-of-type(15),
.folder input:nth-of-type(16):checked ~ .view > [role="tabpanel"]:nth-of-type(16),
.folder input:nth-of-type(17):checked ~ .view > [role="tabpanel"]:nth-of-type(17),
.folder input:nth-of-type(18):checked ~ .view > [role="tabpanel"]:nth-of-type(18),
.folder input:nth-of-type(19):checked ~ .view > [role="tabpanel"]:nth-of-type(19),
.folder input:nth-of-type(20):checked ~ .view >...