I've been using Tailwind CSS for quite a while and I'd never go back to a CSS framework that doesn't use a utility-first approach.

One disadvantage of Tailwind CSS compared to other frameworks like Bootstrap or Bulma is the lack of a set of components like buttons, dropdowns, alerts, and more.

That's why I decided to start a tutorial series here on the DEV community where I show you how to build one of the most commonly used components.

Last time I showed you how to build a modal component and today I'll show you how to build a Tailwind CSS tabs components.

Here's how it will look in the end:

Let's get started!

Tailwind CSS tabs component

First of all we need to code the base HTML markup which can either be a nav component with <a> tags inside or use a <ul> element with list items.

We'll stick with the list variant so let's use the following markup:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

<ul>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Dashboard</a>
    </li>
    <li>
        <a href="#">Settings</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
    <li>
        <a>Disabled</a>
    </li>
</ul>

Nice and simple, right? But now we need to start make it look pretty. Let's first design the whole list:

<ul class="flex flex-wrap border-b border-gray-200">
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Dashboard</a>
    </li>
    <li>
        <a href="#">Settings</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
    <li>
        <a>Disabled</a>
    </li>
</ul>

This helps order the list items horizontally. Now we need to style the list items and the links:

<ul class="flex flex-wrap border-b border-gray-200">
    <li class="mr-2">
        <a href="#" aria-current="page" class="inline-block bg-gray-100 text-blue-600 rounded-t-lg py-4 px-4 text-sm font-medium text-center active">Profile</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Dashboard</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Settings</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Contacts</a>
    </li>
    <li>
        <a class="inline-block text-gray-400 rounded-t-lg py-4 px-4 text-sm font-medium text-center cursor-not-allowed">Disabled</a>
    </li>
</ul>

Great! Now it should look something like this:

We should also create a dark mode style for this component, so let's start by adding the following classes:

<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
    <li class="mr-2">
        <a href="#" aria-current="page" class="inline-block bg-gray-100 text-blue-600 rounded-t-lg py-4 px-4 text-sm font-medium text-center active dark:bg-gray-800 dark:text-blue-500">Profile</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400  dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400  dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
    </li>
    <li>
        <a class="inline-block text-gray-400 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-500 cursor-not-allowed">Disabled</a>
    </li>
</ul>

If you want to learn how to toggle dark mode with Tailwind CSS check out the guide from Flowbite.

If dark mode is actived the tabs component should look like this:

Flowbite - Tailwind CSS components

This tabs component is part of a larger open source component library based on Tailwind CSS called Flowbite.

If you head over to the Flowbite documentation you'll see that there are a lot more variants and options for components such as the tabs.