Published on

Ways To Create A Dialog With Tabs With Tailwind CSS In 60 Minutes

Tags
Cards
Dialog with Tabs

If you're a FrontEnd developer, you must have heard of Tailwind CSS. It is a utility-first CSS framework that allows you to build custom designs quickly. In this article, we'll explore how to create a Dialog with Tabs UI component using Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps you build custom designs quickly. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. Tailwind CSS is highly customizable, and you can use it to create any design you want.

The description of Dialog with Tabs UI component

A Dialog with Tabs UI component is a user interface element that allows you to display multiple tabs within a dialog box. This UI component is useful when you want to display a lot of information on a single page, but you don't want to clutter the page with too many elements.

Why use Tailwind CSS to create a Dialog with Tabs UI component?

Tailwind CSS is an excellent choice for creating a Dialog with Tabs UI component because it provides a set of pre-defined CSS classes that you can use to style your HTML elements. This makes it easy to create a custom design quickly. Additionally, Tailwind CSS is highly customizable, so you can modify the pre-defined CSS classes to suit your needs.

The preview of Dialog with Tabs UI component.

To create a Dialog with Tabs UI component, we'll use Tailwind CSS. Here's a preview of what the final component will look like:

Free download of the Dialog with Tabs's source code

The source code of Dialog with Tabs UI component.

Here's the source code for the Dialog with Tabs UI component:

<script
  src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
  defer
></script>

<div class="fixed inset-0 bg-black bg-opacity-80" x-data="{activeTab: 1}">
  <div class="flex justify-center items-center h-screen w-screen">
    <dialog
      open
      class="rounded-2xl overflow-hidden p-0 w-auto max-w-7xl md:mx-auto md:w-2/3 shadow-lg m-8"
    >
      <div class="flex flex-col lg:flex-row">
        <div
          class="relative h-64 sm:h-80 w-full lg:h-auto lg:w-1/3 xl:w-2/5 flex-none"
        >
          <img
            src="https://placeimg.com/480/480/tech"
            alt=""
            class="absolute inset-0 h-full w-full object-cover"
          />
          <span
            class="absolute block inset-x-0 bottom-0 lg:hidden lg:inset-y-0 lg:right-auto bg-gradient-to-t lg:bg-gradient-to-r from-white to-transparent w-full h-16 lg:h-full lg:w-16"
          ></span>
          <div
            class="relative flex justify-end lg:justify-start flex-wrap text-white text-xl font-bold m-4"
          >
            <div class="bg-green-500 px-4 py-1 rounded">Special Offer</div>
          </div>
        </div>
        <div class="w-full">
          <div class="p-8">
            <div class="flex justify-between items-start">
              <h3 class="text-xl font-bold mb-8" onClick="test">
                A Dummy Title
              </h3>
              <a href="#" class="text-gray-400 hover:text-gray-800 p-1">
                <svg
                  class="w-10 h-10"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </a>
            </div>
            <!-- tabs -->
            <div class="relative">
              <header class="flex items-end text-sm">
                <button
                  class="border border-b-0 px-3 py-1 text-sm focus:outline-none rounded-tl-md"
                  :class="activeTab===1 ? 'font-semibold' : ''"
                  @click="activeTab=1"
                >
                  Description
                </button>
                <button
                  class="border border-b-0 px-3 py-1 focus:outline-none"
                  :class="activeTab===2 ? 'font-semibold' : ''"
                  @click="activeTab=2"
                >
                  Terms
                </button>
                <button
                  class="border border-b-0 px-3 py-1 focus:outline-none rounded-tr-md"
                  :class="activeTab===3 ? 'font-semibold' : ''"
                  @click="activeTab=3"
                >
                  Contact
                </button>
              </header>
              <div
                class="border p-2 h-48 overflow-y-auto rounded-b-xl rounded-tr-xl"
                id="tabs-contents"
              >
                <div x-show="activeTab===1">
                  <p class="text-xs text-gray-500 line-clamp-3">
                    This is the text for Tab1. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum.
                  </p>
                </div>
                <div x-show="activeTab===2">
                  <p class="text-xs text-gray-500 line-clamp-3">
                    This is the text for Tab2. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum.
                  </p>
                </div>
                <div x-show="activeTab===3">
                  <p class="text-xs text-gray-500 line-clamp-3">
                    This is the text for Tab 3. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua.
                  </p>
                </div>
              </div>
            </div>
            <!-- action buttons -->
            <div
              class="flex justify-end items-center text-sm font-bold mt-8 gap-4"
            >
              <a
                class="text-blue-700 border border-blue-300 hover:border-blue-700 px-4 py-1 rounded"
                href="#"
                >Website</a
              >
              <div class="text-red-500 font-normal text-xs px-4 py-1 rounded">
                Report
              </div>
            </div>
          </div>
        </div>
      </div>
    </dialog>
  </div>
</div>

How to create a Dialog with Tabs with Tailwind CSS?

To create a Dialog with Tabs UI component with Tailwind CSS, follow these steps:

Step 1: Set up your HTML

First, set up your HTML. Here's an example:

<div class="dialog">
  <div class="tabs">
    <ul>
      <li class="tab active">Tab 1</li>
      <li class="tab">Tab 2</li>
      <li class="tab">Tab 3</li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div class="tab-pane">
      <p>Tab 2 content goes here.</p>
    </div>
    <div class="tab-pane">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

In this example, we have a div with a class of dialog. Inside the dialog div, we have a div with a class of tabs. Inside the tabs div, we have a ul with three li elements. Each li element has a class of tab. The first li element has an additional class of active.

Below the tabs div, we have a div with a class of tab-content. Inside the tab-content div, we have three div elements. Each div element has a class of tab-pane. The first div element has an additional class of active.

Step 2: Style your HTML with Tailwind CSS

Next, style your HTML with Tailwind CSS. Here's an example:

<div class="dialog bg-white rounded-lg shadow-lg overflow-hidden">
  <div class="tabs border-b border-gray-300">
    <ul class="flex">
      <li class="-mb-px mr-1">
        <a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold" href="#">
          Tab 1
        </a>
      </li>
      <li class="mr-1">
        <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" href="#">
          Tab 2
        </a>
      </li>
      <li class="mr-1">
        <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" href="#">
          Tab 3
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content p-4">
    <div class="tab-pane">
      <p>Tab 1 content goes here.</p>
    </div>
    <div class="tab-pane hidden">
      <p>Tab 2 content goes here.</p>
    </div>
    <div class="tab-pane hidden">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

In this example, we've added some Tailwind CSS classes to our HTML. We've added a bg-white class to our dialog div to give it a white background. We've also added a rounded-lg class to give it rounded corners, and a shadow-lg class to give it a shadow.

We've added a border-b class to our tabs div to give it a bottom border. We've also added a border-gray-300 class to give it a light gray border color.

We've added a flex class to our ul element to make it a flex container. We've also added some classes to our li and a elements to style them as tabs. We've used the py-2 and px-4 classes to add padding to our tabs, and we've used the text-blue-500 and text-blue-700 classes to set the text color of our tabs.

Finally, we've added some classes to our tab-content div and our tab-pane divs to hide and show the content of our tabs.

Step 3: Add JavaScript to handle tab switching

Finally, add some JavaScript to handle tab switching. Here's an example:

const tabs = document.querySelectorAll('.tab');
const tabPanes = document.querySelectorAll('.tab-pane');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach((tab) => tab.classList.remove('active'));
    tab.classList.add('active');

    tabPanes.forEach((pane) => pane.classList.add('hidden'));
    tabPanes[index].classList.remove('hidden');
  });
});

In this example, we've added some JavaScript to handle tab switching. We've selected all of our tab elements and all of our tab-pane elements using document.querySelectorAll(). We've then added an event listener to each tab element that listens for a click event.

When a tab element is clicked, we remove the active class from all of our tab elements and add it to the clicked tab element. We also hide all of our tab-pane elements by adding the hidden class to them, and we show the corresponding tab-pane element by removing the hidden class from it.

Conclusion

In this article, we've explored how to create a Dialog with Tabs UI component using Tailwind CSS in just 60 minutes. We've learned how to set up our HTML, style it with Tailwind CSS, and add JavaScript to handle tab switching. With these skills, you can create any UI component you want using Tailwind CSS.