TabBar

<!-- TabBar -->
<div
  class="flex flex-col items-center justify-center gap-1 whitespace-nowrap rounded-lg bg-accent p-1 sm:flex-row"></div>
 
<!-- TabBar Item/Active -->
<button
  class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-surface px-3.5 py-2 text-sm text-main-text drop-shadow-sm hover:bg-surface hover:text-main-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main disabled:pointer-events-none disabled:opacity-50">
  Tab One
</button>
 
<!-- TabBar Item -->
<button
  class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-transparent px-3.5 py-2 text-sm text-muted-text hover:bg-surface hover:text-surface-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main disabled:pointer-events-none disabled:opacity-50">
  Tab Three
</button>