Tabs
Below you can find a tabs component styled with tailwindcss.
Tabs
- Preview
- HTML
- React
ItemItemItemItemItemItem
Copy
<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>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>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>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>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>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>Item</span>
</span>
</div>
Copy
<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>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>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>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>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>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>Item</span>
</span>
</div>Default tab
- Preview
- HTML
- React
Copy
<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>Item</span>
</span>
Copy
<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>Item</span>
</span>Active tab
- Preview
- HTML
- React
Copy
<span class="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
<span>Item</span>
</span>
Copy
<span className="px-2 py-1 text-base font-normal rounded-lg cursor-pointer text-brand-primary-500 bg-brand-primary-100">
<span>Item</span>
</span>Tab with icon
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M7.49811 10.1572V17.0021H16.6019V10.2273"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M6.29761 10.9996L12 6.99791L17.7024 10.9996"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" 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"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" 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" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<span class="ml-1">Item</span>
</span>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M7.49811 10.1572V17.0021H16.6019V10.2273"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M6.29761 10.9996L12 6.99791L17.7024 10.9996"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" 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"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" 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" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<span className="ml-1">Item</span>
</span>