Skip to Content

Tabs

Below you can find a tabs component styled with tailwindcss.

Preview - Tabs

ItemItemItemItemItemItem
HTML
<div class="space-x-1">
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
		<span class>Item</span>
	</span>
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
</div>
React
<div className="space-x-1">
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
		<span class>Item</span>
	</span>
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
	<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
		<span class>Item</span>
	</span>
</div>

Preview - Default tab

Item
HTML
<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
	<span class>Item</span>
</span>
React
<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600">
	<span class>Item</span>
</span>

Preview - Active tab

Item
HTML
<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
	<span class>Item</span>
</span>
React
<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
	<span class>Item</span>
</span>

Preview - Tab with icon

Item
HTML
<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600 inline-flex items-center">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
		<path d="M7.49811 10.1572V17.0021H16.6019V10.2273" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path d="M6.29761 10.9996L12 6.99791L17.7024 10.9996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path d="M13.6507 17.0021V14.2009C13.6507 13.6007 13.1505 13.1004 12.5502 13.1004H11.4498C10.8495 13.1004 10.3493 13.6007 10.3493 14.2009V17.0021" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49809 2.99625H16.5058C18.9899 2.99625 21.0037 5.01009 21.0037 7.49412V16.5069C21.0037 18.9899 18.9899 21.0037 16.5058 21.0037H7.49409C5.01005 21.0037 2.99622 18.9899 2.99622 16.5059V7.49812C2.99622 5.01209 5.01206 2.99625 7.49809 2.99625Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
	<span class="ml-1">Item</span>
</span>
React
<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-neutral-600 bg-transparent hover:bg-brand-primary-100 dark:text-white dark:bg-transparent dark:hover:bg-neutral-600 inline-flex items-center">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
		<path d="M7.49811 10.1572V17.0021H16.6019V10.2273" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path d="M6.29761 10.9996L12 6.99791L17.7024 10.9996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path d="M13.6507 17.0021V14.2009C13.6507 13.6007 13.1505 13.1004 12.5502 13.1004H11.4498C10.8495 13.1004 10.3493 13.6007 10.3493 14.2009V17.0021" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49809 2.99625H16.5058C18.9899 2.99625 21.0037 5.01009 21.0037 7.49412V16.5069C21.0037 18.9899 18.9899 21.0037 16.5058 21.0037H7.49409C5.01005 21.0037 2.99622 18.9899 2.99622 16.5059V7.49812C2.99622 5.01209 5.01206 2.99625 7.49809 2.99625Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
	<span className="ml-1">Item</span>
</span>