Icon-only Tabs

<!-- Icon-only tabs: each tab carries an aria-label because the icon (aria-hidden) is the only thing shown. 40px square keeps a tap target. -->
<div class="max-w-2xl" data-tabs-icononly>
  <div class="inline-flex max-w-full gap-1 overflow-x-auto rounded-lg bg-gray-100 p-1 dark:bg-gray-800" role="tablist" aria-label="View mode">
    <button class="flex h-10 w-10 flex-none items-center justify-center rounded-md text-gray-500 transition-colors hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none aria-selected:bg-white aria-selected:text-blue-600 aria-selected:shadow-sm dark:text-gray-400 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:aria-selected:bg-gray-950 dark:aria-selected:text-blue-400" type="button" role="tab" aria-label="Grid view" id="io-grid" aria-controls="io-panel-grid" aria-selected="true" tabindex="0">
      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" class="h-5 w-5" aria-hidden="true"><path d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z" stroke-linejoin="round" /></svg>
    </button>
    <button class="flex h-10 w-10 flex-none items-center justify-center rounded-md text-gray-500 transition-colors hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none aria-selected:bg-white aria-selected:text-blue-600 aria-selected:shadow-sm dark:text-gray-400 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:aria-selected:bg-gray-950 dark:aria-selected:text-blue-400" type="button" role="tab" aria-label="List view" id="io-list" aria-controls="io-panel-list" aria-selected="false" tabindex="-1">
      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" class="h-5 w-5" aria-hidden="true"><path d="M7 5h10M7 10h10M7 15h10M3 5h.01M3 10h.01M3 15h.01" stroke-linecap="round" /></svg>
    </button>
  </div>

  <div class="pt-4 text-sm leading-relaxed text-gray-600 focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:focus-visible:ring-blue-400" role="tabpanel" id="io-panel-grid" aria-labelledby="io-grid" tabindex="0"><p>Assets shown as a grid of thumbnails.</p></div>
  <div class="pt-4 text-sm leading-relaxed text-gray-600 focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:focus-visible:ring-blue-400" role="tabpanel" id="io-panel-list" aria-labelledby="io-list" tabindex="0" hidden><p>Assets shown as a dense, sortable list.</p></div>
</div>

<script>
  (function () {
    document.querySelectorAll('[data-tabs-icononly]').forEach(function (root) {
      var tabs = [].slice.call(root.querySelectorAll('[role="tab"]'));
      function panelFor(t) { return document.getElementById(t.getAttribute('aria-controls')); }
      function select(i, focus) {
        tabs.forEach(function (t, n) {
          var on = n === i;
          t.setAttribute('aria-selected', String(on));
          t.tabIndex = on ? 0 : -1;
          var p = panelFor(t);
          if (p) p.hidden = !on;
        });
        if (focus) tabs[i].focus();
      }
      tabs.forEach(function (t, i) {
        t.addEventListener('click', function () { select(i, false); });
        t.addEventListener('keydown', function (e) {
          var n = -1;
          if (e.key === 'ArrowRight') n = (i + 1) % tabs.length;
          else if (e.key === 'ArrowLeft') n = (i - 1 + tabs.length) % tabs.length;
          else if (e.key === 'Home') n = 0;
          else if (e.key === 'End') n = tabs.length - 1;
          else return;
          e.preventDefault();
          select(n, true);
        });
      });
    });
  })();
</script>