Published on

6 Steps To Make A Tabs With Tailwind CSS Like A Pro In Under An Hour

Tags
ButtonsTabsWidget
Tabs

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Tabs ui component

Tabs with transition

Why use Tailwind CSS to create a Tabs ui component?

  • It can make the building process of Tabs ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Tabs component file.

The preview of Tabs ui component

Free download of the Tabs's source code

The source code of Tabs ui component

<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/perfect-scrollbar.min.js"></script>

<div
  class="flex flex-col items-center justify-center min-h-screen antialiased bg-gray-100"
>
  <div x-data="tabs" class="overflow-hidden rounded-2xl" x-cloak>
    <!-- Tabs -->
    <div
         x-show="isTabsActive"
         x-collapse
         class="bg-white border-t-4 border-purple-500 border-x-4 rounded-t-2xl"
    >
      <div id="tabs-container" class="relative h-64 overflow-hidden">
        <ul class="p-6">
          <template x-for="(tab, index) in tabs" x-key="index">
            <li x-show="activeTab == tab.title" class="space-y-4">
              <h2
                  x-text="(new String(tab.title)).replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())))"
                  class="text-3xl text-gray-700"
                  ></h2>
              <p
                 class="max-w-md text-base text-gray-500"
                 x-text="tab.content"
                 ></p>
            </li>
          </template>
        </ul>
      </div>
    </div>

    <div
      class="relative flex items-center overflow-hidden bg-white border-4 border-purple-500 rounded-b-2xl"
    >
      <!-- Links -->
      <nav class="flex items-center justify-center h-20 gap-8 px-6">
        <template x-for="(link, index) in links" x-key="index">
          <a
             href="#"
             @click="setActiveTab($event, link.title, index)"
             class="grid w-16 h-16 grid-cols-1 grid-rows-1"
             >
            <span class="sr-only" x-text="link.title"></span>
            <div
                 class="col-[1/1] row-[1/1] flex items-center justify-center w-16 h-16 transition-opacity duration-300"
                 :class="activeTab != link.title ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'"
                 x-html="link.inActiveIcon"
                 ></div>
            <div
                 class="col-[1/1] row-[1/1] flex items-center justify-center w-16 h-16 transition-opacity duration-300"
                 :class="activeTab == link.title ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'"
                 x-html="link.activeIcon"
                 ></div>
          </a>
        </template>
      </nav>

      <!-- Show/Hide button -->
      <button
              @click="isTabsActive = !isTabsActive"
              class="absolute z-10 flex items-center justify-center gap-2 transition-all bg-purple-500"
              :class="isTabsActive ? 'left-0 top-0 w-8 h-8 rounded-br-lg' : 'w-full h-full inset-0'"
              >
        <svg
             x-show="!isTabsActive"
             class="w-6 h-6 text-white animate-pulse"
             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="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                ></path>
          <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                ></path>
        </svg>

        <svg
             x-show="isTabsActive"
             class="w-6 h-6 text-white"
             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="2"
                d="M6 18L18 6M6 6l12 12"
                ></path>
        </svg>

        <span x-show="!isTabsActive" class="text-white">Click to Open</span>
      </button>

      <!-- Indicator -->
      <div
           id="indicator"
           class="absolute w-6 h-8 transition-all duration-300 bg-purple-500 rounded-full -bottom-4 left-11"
           >
        <div
             style="box-shadow: 0 10px 0 rgb(168 85 247)"
             class="absolute w-5 h-5 bg-white -left-4 bottom-1/2 rounded-br-3xl"
             ></div>
        <div
             style="box-shadow: 0 10px 0 rgb(168 85 247)"
             class="absolute w-5 h-5 bg-white -right-4 bottom-1/2 rounded-bl-3xl"
             ></div>
      </div>
    </div>
  </div>
</div>

<!-- Author links -->
<div class="fixed flex items-center space-x-4 bottom-5 left-5">
    <a href="https://twitter.com/ak_kamona" target="_blank" class="transition-transform transform hover:scale-125">
        <span class="sr-only">Twitter</span>
        <svg
            aria-hidden="true"
            class="w-8 h-8 text-blue-500"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            >
            <path
                d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"
                ></path>
        </svg>
    </a>
    <a href="https://github.com/Kamona-WD" target="_blank" class="transition-transform transform hover:scale-125">
        <span class="sr-only">Github</span>
        <svg
            aria-hidden="true"
            class="w-8 h-8 text-black"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
                ></path>
        </svg>
    </a>
</div>

<script>
const tabs = () => {
  let ps;
  const init = () => {
    const tabsContainer = document.querySelector("#tabs-container");
    ps = new PerfectScrollbar(tabsContainer);
  };

  return {
    init,

    isTabsActive: false,

    activeTab: "templates",

    links: [
      {
        title: "templates",
        inActiveIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                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="2" 
                  d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
                ></path>
              </svg>
              `,
        activeIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path 
                  d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                ></path>
              </svg>
              `,
      },
      {
        title: "cloud",
        inActiveIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                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="2" 
                  d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                ></path>
              </svg>
              `,
        activeIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
              <path 
                d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"
              ></path>
              </svg>
              `,
      },
      {
        title: "security",
        inActiveIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                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="2" 
                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                ></path>
              </svg>
              `,
        activeIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path 
                  fill-rule="evenodd" 
                  d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"
                ></path>
              </svg>
              `,
      },
      {
        title: "support",
        inActiveIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                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="2"
                  d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
                ></path>
              </svg>
              `,
        activeIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"
                ></path>
              </svg>
              `,
      },
      {
        title: "settings",
        inActiveIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                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="2"
                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                ></path>
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                ></path>
              </svg>
              `,
        activeIcon: `
              <svg
                aria-hidden="true"
                class="w-8 h-8 text-purple-500"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              `,
      },
    ],

    tabs: [
      {
        title: "templates",
        content:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod hic autem, cumque nobis in a, quam temporibus est et iure ullam tenetur ut. Officia explicabo atque beatae. Illum, eum quo?",
      },
      {
        title: "cloud",
        content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis.",
      },
      {
        title: "security",
        content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis.",
      },
      {
        title: "support",
        content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis.",
      },
      {
        title: "settings",
        content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat fuga enim laborum corrupti commodi sapiente iste dolore non repellat? Odio sequi facilis blanditiis. Cupiditate quae accusantium consequatur sit! Harum, perferendis.",
      },
    ],

    setActiveTab(e, link, index) {
      e.preventDefault();

      this.activeTab = link;

      if (ps) {
        ps.update();
      }

      document.querySelector(
        "#indicator"
        /* TODO: use link (width / 2 ) */
      ).style.transform = `translateX(calc(${96 * index}px))`;
    },
  };
};  
</script>

How to create a Tabs with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to create a Tabs component

  • flex
  • flex-col
  • min-h-screen
  • bg-gray-100
  • overflow-hidden
  • bg-white
  • border-t-4
  • border-purple-500
  • border-x-4
  • relative
  • h-64
  • p-6
  • text-3xl
  • text-gray-700
  • max-w-md
  • text-base
  • text-gray-500
  • border-4
  • h-20
  • gap-8
  • px-6
  • grid
  • w-16
  • h-16
  • grid-cols-1
  • grid-rows-1
  • absolute
  • z-10
  • gap-2
  • bg-purple-500
  • left-0
  • top-0
  • w-8
  • h-8
  • w-full
  • h-full
  • w-6
  • h-6
  • text-white
  • -bottom-4
  • left-11
  • w-5
  • h-5
  • -left-4
  • bottom-1/2
  • -right-4
  • fixed
  • bottom-5
  • left-5
  • text-blue-500
  • text-black
  • text-purple-500

52 steps to create a Tabs component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Use flex to create a block-level flex container.

  3. Set the minimum width/height of an element using the min-h-screen utilities.

  4. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  5. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  6. Control the background color of an element to white using the bg-white utilities.

  7. Control the border color of an element to t-4 using the border-t-4 utilities.

  8. Control the border color of an element to purple-500 using the border-purple-500 utilities.

  9. Control the border color of an element to x-4 using the border-x-4 utilities.

  10. Use relative to position an element according to the normal flow of the document.

  11. Use h-64 to set an element to a fixed height(16rem).

  12. Control the padding on all sides of an element to 1.5rem using the p-6 utilities.

  13. Control the text color of an element to 3xl using the text-3xl utilities.

  14. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  15. Set the maximum width/height of an element using the max-w-md utilities.

  16. Control the text color of an element to base using the text-base utilities.

  17. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  18. Control the border color of an element to 1rem using the border-4 utilities.

  19. Use h-20 to set an element to a fixed height(5rem).

  20. To specify the width between columns, you can use the gap-8 utilities.

  21. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  22. Use grid to create a grid container.

  23. Use w-16 to set an element to a fixed width(4rem).

  24. Use h-16 to set an element to a fixed height(4rem).

  25. Use grid to create a grid container.

  26. Use grid to create a grid container.

  27. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  28. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  29. To specify the width between columns, you can use the gap-2 utilities.

  30. Control the background color of an element to purple-500 using the bg-purple-500 utilities.

  31. Use the left-0 utilities to set the left position of a positioned element to 0rem.

  32. Use the top-0 utilities to set the top position of a positioned element to 0rem.

  33. Use w-8 to set an element to a fixed width(2rem).

  34. Use h-8 to set an element to a fixed height(2rem).

  35. Use w-full to set an element to a 100% based width.

  36. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  37. Use w-6 to set an element to a fixed width(1.5rem).

  38. Use h-6 to set an element to a fixed height(1.5rem).

  39. Control the text color of an element to white using the text-white utilities.

  40. Use the -bottom-4 utilities to set the bottom position of a positioned element to -1rem.

  41. Use the left-11 utilities to set the left position of a positioned element to 2.75rem.

  42. Use w-5 to set an element to a fixed width(1.25rem).

  43. Use h-5 to set an element to a fixed height(1.25rem).

  44. Use the -left-4 utilities to set the left position of a positioned element to -1rem.

  45. Use the bottom-1/2 utilities to set the bottom position of a positioned element to 1/2.

  46. Use the -right-4 utilities to set the right position of a positioned element to -1rem.

  47. Use fixed to position an element relative to the browser window.

  48. Use the bottom-5 utilities to set the bottom position of a positioned element to 1.25rem.

  49. Use the left-5 utilities to set the left position of a positioned element to 1.25rem.

  50. Control the text color of an element to blue-500 using the text-blue-500 utilities.

  51. Control the text color of an element to black using the text-black utilities.

  52. Control the text color of an element to purple-500 using the text-purple-500 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Tabs components, learn and follow along to implement your own components.