Tab
Sections of content in a single view.
<div class="flex flex-col gap-16px items-center">
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
</div>
Default group
<div class="flex flex-col gap-32px items-center">
<!-- S size -->
<div class="flex gap-12px border-b border-black-200 dark:border-black-600">
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
<!-- M size -->
<div class="flex gap-12px border-b border-black-200 dark:border-black-600">
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
</div>
Vertical
<div class="flex flex-col gap-16px items-center">
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
</div>
Vertical group
<div class="flex gap-32px items-center justify-center">
<!-- S size -->
<div class="flex flex-col gap-12px border-l border-black-200 dark:border-black-600">
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
<!-- M size -->
<div class="flex flex-col gap-12px border-l border-black-200 dark:border-black-600">
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
</div>
Segmented
<div class="flex flex-col gap-16px items-center">
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
Tab
</button>
</div>
Segmented horizontal group
<div class="flex flex-col gap-32px items-center">
<!-- S size -->
<div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800">
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
<!-- M size -->
<div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800">
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
</div>
Segmented vertical group
<div class="flex gap-32px items-center justify-center">
<!-- S size -->
<div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800 flex-col">
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
<!-- M size -->
<div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800 flex-col">
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="true">
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3333 4L5.99996 11.3333L2.66663 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
Tab
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
12
</div>
</button>
<button
type="button"
class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
data-active="false">
Tab
</button>
</div>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.
Don't forget to set fill/stroke value to currentColor for icons to correct icon color.