Pure HTML, CSS & JS Tabs No More Radio Button Hacks.

<!-- The main container for the tab component -->
<div class="tabs-container">

 <!-- The container for tab buttons (labels) -->
 <div class="tab-group" role="tablist" aria-label="Example Tab List">
  <button id="label-for-panel-1" class="tab-label-base active" role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab One</button>
  <button id="label-for-panel-2" class="tab-label-base" role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab Two</button>
 </div>

 <!-- The container for the tab content panels -->
 <div class="tab-content-container">
  <div id="panel-1" class="tab-content active" role="tabpanel" aria-labelledby="label-for-panel-1">
   <p>Content for the first tab.</p>
  </div>
  <div id="panel-2" class="tab-content" role="tabpanel" aria-labelledby="label-for-panel-2">
   <p>Content for the second tab.</p>
  </div>
 </div>

</div>

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}

.tab-group {
 display: flex;
 overflow-x: auto;
 border-bottom: 2px solid #d1d5db; /* gray-300 */
}

.tab-label-base {
 cursor: pointer;
 padding: 0.75rem 1.25rem;
 font-weight: 500;
 border: 2px solid transparent;
 border-bottom: none;
 background-color: transparent;
 white-space: nowrap;
 position: relative;
 bottom: -2px; /* Sits on top of the container's border */
 transition: all 0.2s ease-in-out;
}

.tab-label-base:hover {
 background-color: #f3f4f6; /* gray-100 */
}

.tab-label-base:focus-visible {
 outline: 2px solid #3b82f6; /* blue-500 */
 outline-offset: -2px;
 border-radius: 0.25rem;
}

.tab-label-base.active {
 font-weight: 600;
 color: #1e40af; /* blue-800 */
 border-color: #d1d5db;
 border-radius: 0.5rem 0.5rem 0 0;
 background-color: #ffffff;
}

.tab-content {
 display: none; /* Hide inactive panels */
 animation: fadeIn 0.3s ease-out;
 padding: 1.5rem;
 border: 2px solid #d1d5db;
 border-top: none;
 border-radius: 0 0 0.5rem 0.5rem;
}

.tab-content.active {
 display: block; /* Show the active panel */
}

document.addEventListener('DOMContentLoaded', () => {
 /**
  * Initializes a single tab component.
  * @param {HTMLElement} tabContainer - The .tabs-container element.
  */
 const setupTabComponent = (tabContainer) => {
  const tablist = tabContainer.querySelector('[role="tablist"]');
  if (!tablist) return;

  const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));

  const switchTab = (newTab) => {
   if (!newTab || newTab.getAttribute('aria-selected') === 'true') {
 return; // Do nothing if already active
   }

   const currentActiveTab = tablist.querySelector('[aria-selected="true"]');

   if (currentActiveTab) {
 currentActiveTab.classList.remove('active');
 currentActiveTab.setAttribute('aria-selected', 'false');
 currentActiveTab.setAttribute('tabindex', '-1');
 const currentPanelId = currentActiveTab.getAttribute('aria-controls');
 // By scoping the query to the tabContainer, we ensure component encapsulation.
 // This prevents conflicts if multiple tab components on the same page
 // were to accidentally use the same ID for a panel.
 const currentPanel = tabContainer.querySelector(`#${currentPanelId}`);
 if (currentPanel) {
  currentPanel.classList.remove('active');
 }
   }

   newTab.classList.add('active');
   newTab.setAttribute('aria-selected', 'true');
   newTab.setAttribute('tabindex', '0');
   const newPanelId = newTab.getAttribute('aria-controls');
   // Scoping this query is crucial for robust, reusable components.
   const newPanel = tabContainer.querySelector(`#${newPanelId}`);
   if (newPanel) {
 newPanel.classList.add('active');
   }
   newTab.focus({ preventScroll: true });
  };

  // Use event delegation for click handling.
  tablist.addEventListener('click', (e) => {
   const tab = e.target.closest('[role="tab"]');
   
   // Ensure the clicked element is a tab and belongs to this specific tablist.
   if (tab && tab.closest('[role="tablist"]') === tablist) {
 switchTab(tab);
   }
  });

  // Add keyboard navigation to the tab list.
  tablist.addEventListener('keydown', (e) => {
   const tab = e.target.closest('[role="tab"]');

   // Ensure the event is from a tab within this component
   if (!tab || tab.closest('[role="tablist"]') !== tablist) {
 return;
   }

   const currentIndex = tabs.indexOf(tab);
   if (currentIndex === -1) return;

   let nextIndex = -1;

   if (e.key === 'ArrowRight') {
 e.preventDefault();
 // If not the last tab, move to the next one.
 // Otherwise, do nothing, allowing the event to bubble up to a parent tablist.
 if (currentIndex < tabs.length - 1) {
  nextIndex = currentIndex + 1;
 }
   } else if (e.key === 'ArrowLeft') {
 e.preventDefault();
 // If not the first tab, move to the previous one.
 // Otherwise, do nothing, allowing the event to bubble up.
 if (currentIndex > 0) {
  nextIndex = currentIndex - 1;
 }
   } else if (e.key === 'Home') {
 e.preventDefault();
 nextIndex = 0;
   } else if (e.key === 'End') {
 e.preventDefault();
 nextIndex = tabs.length - 1;
   }
   
   if (nextIndex !== -1) {
 // Stop propagation only if we are handling the navigation internally.
 // This allows arrow keys to "escape" a nested tab component.
 e.stopPropagation();
 switchTab(tabs[nextIndex]);
   }
  });
 };

 // Initialize all tab components on the page.
 document.querySelectorAll('.tabs-container').forEach(setupTabComponent);
});