Published on

Learn How To Create A simple tab button With Tailwind CSS from the Pros

simple tab button

As a FrontEnd technology blogger, it is important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained popularity in recent years is Tailwind CSS. In this article, we will learn how to create a simple tab button using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It is designed to be highly customizable and allows developers to create complex UI components quickly and easily.

The Description of Simple Tab Button UI Component

A tab button is a UI component that is commonly used to display multiple sections of content within a single page. Each button represents a different section, and when clicked, the corresponding content is displayed.

Why Use Tailwind CSS to Create a Simple Tab Button UI Component?

Tailwind CSS provides a set of pre-defined classes that can be used to create a simple tab button UI component quickly and easily. It also allows for customization of the button's appearance and functionality through the use of custom classes.

The Preview of Simple Tab Button UI Component

To create a simple tab button using Tailwind CSS, we will use a combination of HTML and CSS. The HTML code will define the structure of the button, while the CSS code will style it.

Free download of the simple tab button's source code

The Source Code of Simple Tab Button UI Component

To create a simple tab button using Tailwind CSS, we will use a combination of HTML and CSS. The HTML code will define the structure of the button, while the CSS code will style it.

<script src="//unpkg.com/alpinejs" defer></script>

<div class="flex min-h-screen w-full items-center justify-center">
  <div x-data="{ filters: ['All', 'Free', 'Premium'], selected: 'All' }"
    class="inline-flex rounded-lg my-3 bg-gray-100 bg-opacity-30 mx-auto">
    <template x-for="(filter, index) in filters">
      <button @click="selected = filter"
        :class="[(index === filters.length -1) && '!rounded-r-lg', (index === 0) && '!rounded-l-lg', filter === selected && 'border-green-500 bg-green-500 text-white']"
        class="py-[10px] sm:py-2 my-1 px-[12px] sm:px-6 inline-flex items-center justify-center font-medium border border-gray-50 text-center focus:bg-primary text-black text-sm sm:text-base capitalize bg-white"
        x-text="filter">
      </button>
    </template>
  </div>
</div>

How to Create a Simple Tab Button with Tailwind CSS?

To create a simple tab button using Tailwind CSS, follow these steps:

  1. Create the HTML structure for the tab button. This will include a container element and a set of button elements, each representing a different section of content.
<div class="tab-container">
  <button class="tab-button active">Tab 1</button>
  <button class="tab-button">Tab 2</button>
  <button class="tab-button">Tab 3</button>
</div>
  1. Add the necessary Tailwind CSS classes to the HTML elements. This will include classes for the container, buttons, and the active button.
<div class="tab-container bg-gray-200 p-4">
  <button class="tab-button active bg-white rounded-t-lg px-4 py-2 mr-1">Tab 1</button>
  <button class="tab-button bg-white rounded-t-lg px-4 py-2 mr-1">Tab 2</button>
  <button class="tab-button bg-white rounded-t-lg px-4 py-2">Tab 3</button>
</div>
  1. Add JavaScript code to handle the button click events and display the corresponding content.
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove the active class from all buttons
    tabButtons.forEach(button => button.classList.remove('active'));

    // Add the active class to the clicked button
    button.classList.add('active');

    // Hide all tab contents
    tabContents.forEach(content => content.classList.add('hidden'));

    // Show the corresponding tab content
    const tabContent = document.querySelector(`#${button.dataset.tab}`);
    tabContent.classList.remove('hidden');
  });
});
  1. Add the necessary CSS code to style the tab button. This will include styles for the container, buttons, and the active button.
.tab-container {
  display: flex;
  flex-wrap: wrap;
}

.tab-button {
  border: none;
  outline: none;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #e2e8f0;
}

.tab-button.active {
  background-color: #fff;
  border-bottom-color: transparent;
}

.tab-content {
  display: none;
}

Conclusion

In this article, we learned how to create a simple tab button using Tailwind CSS. By using pre-defined classes, we were able to create a functional and customizable UI component quickly and easily. With Tailwind CSS, developers can create complex UI components without having to write custom CSS, saving time and improving productivity.