Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Tabs

- Components
- Tabs

## Basic Tabs

Code

Tabs make it easy to explore and switch between different views. Check out code for detail of usage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum finibus arcu vitae scelerisque. Etiam rutrum blandit condimentum. Maecenas condimentum massa vitae quam interdum, et lacinia urna tempor

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus viverra magna, id pulvinar odio metus non enim. Ut id augue interdum, ultrices felis eu, tincidunt libero.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie. Vestibulum vel tristique libero. Morbi vulputate odio at viverra sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu leo.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Etiam nec ante eget lacus vulputate egestas non iaculis tellus. Suspendisse tempus ex in tortor venenatis malesuada. Aenean consequat dui vitae nibh lobortis condimentum. Duis vel risus est.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

      <div x-data="{activeTab:'tabHome'}" class="tabs flex flex-col">
        <div class="is-scrollbar-hidden overflow-x-auto">
          <div class="tabs-list flex">
            <button
              @click="activeTab = 'tabHome'"
              :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            >
              Home
            </button>
            <button
              @click="activeTab = 'tabProfile'"
              :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            >
              Profile
            </button>
            <button
              @click="activeTab = 'tabMessages'"
              :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            >
              Messages
            </button>
            <button
              @click="activeTab = 'tabSettings'"
              :class="activeTab === 'tabSettings' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            >
              Settings
            </button>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'tabHome'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
                elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
                condimentum. Maecenas condimentum massa vitae quam interdum, et
                lacinia urna tempor
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabProfile'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
                viverra magna, id pulvinar odio metus non enim. Ut id augue
                interdum, ultrices felis eu, tincidunt libero.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabMessages'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
                Vestibulum vel tristique libero. Morbi vulputate odio at viverra
                sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
                leo.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabSettings'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
                Suspendisse tempus ex in tortor venenatis malesuada. Aenean
                consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
        </div>
      </div>

## Border Bottom

Code

Tabs make it easy to explore and switch between different views. Check out code for detail of usage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum finibus arcu vitae scelerisque. Etiam rutrum blandit condimentum. Maecenas condimentum massa vitae quam interdum, et lacinia urna tempor

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus viverra magna, id pulvinar odio metus non enim. Ut id augue interdum, ultrices felis eu, tincidunt libero.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie. Vestibulum vel tristique libero. Morbi vulputate odio at viverra sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu leo.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Etiam nec ante eget lacus vulputate egestas non iaculis tellus. Suspendisse tempus ex in tortor venenatis malesuada. Aenean consequat dui vitae nibh lobortis condimentum. Duis vel risus est.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

      <div x-data="{activeTab:'tabHome'}" class="tabs flex flex-col">
        <div class="is-scrollbar-hidden overflow-x-auto">
          <div class="border-b-2 border-slate-150 dark:border-navy-500">
            <div class="tabs-list flex">
              <button
                @click="activeTab = 'tabHome'"
                :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                Home
              </button>
              <button
                @click="activeTab = 'tabProfile'"
                :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                Profile
              </button>
              <button
                @click="activeTab = 'tabMessages'"
                :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                Messages
              </button>
              <button
                @click="activeTab = 'tabSettings'"
                :class="activeTab === 'tabSettings' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                Settings
              </button>
            </div>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'tabHome'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
                elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
                condimentum. Maecenas condimentum massa vitae quam interdum, et
                lacinia urna tempor
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabProfile'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
                viverra magna, id pulvinar odio metus non enim. Ut id augue
                interdum, ultrices felis eu, tincidunt libero.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabMessages'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
                Vestibulum vel tristique libero. Morbi vulputate odio at viverra
                sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
                leo.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabSettings'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
                Suspendisse tempus ex in tortor venenatis malesuada. Aenean
                consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
        </div>
      </div>

## Tab With Icon

Code

Tabs make it easy to explore and switch between different views. Check out code for detail of usage.

Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus viverra magna, id pulvinar odio metus non enim. Ut id augue interdum, ultrices felis eu, tincidunt libero.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie. Vestibulum vel tristique libero. Morbi vulputate odio at viverra sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu leo.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Etiam nec ante eget lacus vulputate egestas non iaculis tellus. Suspendisse tempus ex in tortor venenatis malesuada. Aenean consequat dui vitae nibh lobortis condimentum. Duis vel risus est.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

      <div x-data="{activeTab:'tabProfile'}" class="tabs flex flex-col">
        <div class="is-scrollbar-hidden overflow-x-auto">
          <div class="border-b-2 border-slate-150 dark:border-navy-500">
            <div class="tabs-list -mb-0.5 flex">
              <button
                @click="activeTab = 'tabHome'"
                :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                  />
                </svg>
                <span>Home</span>
              </button>
              <button
                @click="activeTab = 'tabProfile'"
                :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                  />
                </svg>
                <span>Profile</span>
              </button>
              <button
                @click="activeTab = 'tabMessages'"
                :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
                <span> Messages </span>
              </button>
            </div>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'tabHome'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
                viverra magna, id pulvinar odio metus non enim. Ut id augue
                interdum, ultrices felis eu, tincidunt libero.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabProfile'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
                Vestibulum vel tristique libero. Morbi vulputate odio at viverra
                sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
                leo.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabMessages'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
                Suspendisse tempus ex in tortor venenatis malesuada. Aenean
                consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
        </div>
      </div>

## Boxed Tabs

Code

Tabs make it easy to explore and switch between different views. Check out code for detail of usage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum finibus arcu vitae scelerisque. Etiam rutrum blandit condimentum. Maecenas condimentum massa vitae quam interdum, et lacinia urna tempor

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus viverra magna, id pulvinar odio metus non enim. Ut id augue interdum, ultrices felis eu, tincidunt libero.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie. Vestibulum vel tristique libero. Morbi vulputate odio at viverra sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu leo.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Etiam nec ante eget lacus vulputate egestas non iaculis tellus. Suspendisse tempus ex in tortor venenatis malesuada. Aenean consequat dui vitae nibh lobortis condimentum. Duis vel risus est.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

      <div x-data="{activeTab:'tabHome'}" class="tabs flex flex-col">
        <div
          class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
        >
          <div class="tabs-list flex px-1.5 py-1">
            <button
              @click="activeTab = 'tabHome'"
              :class="activeTab === 'tabHome' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 px-3 py-1.5 font-medium"
            >
              Home
            </button>
            <button
              @click="activeTab = 'tabProfile'"
              :class="activeTab === 'tabProfile' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 px-3 py-1.5 font-medium"
            >
              Profile
            </button>
            <button
              @click="activeTab = 'tabMessages'"
              :class="activeTab === 'tabMessages' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 px-3 py-1.5 font-medium"
            >
              Messages
            </button>
            <button
              @click="activeTab = 'tabSettings'"
              :class="activeTab === 'tabSettings' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 px-3 py-1.5 font-medium"
            >
              Settings
            </button>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'tabHome'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
                elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
                condimentum. Maecenas condimentum massa vitae quam interdum, et
                lacinia urna tempor
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabProfile'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
                viverra magna, id pulvinar odio metus non enim. Ut id augue
                interdum, ultrices felis eu, tincidunt libero.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabMessages'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
                Vestibulum vel tristique libero. Morbi vulputate odio at viverra
                sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
                leo.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabSettings'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
                Suspendisse tempus ex in tortor venenatis malesuada. Aenean
                consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
        </div>
      </div>

## Boxed Tabs With Icon

Code

Tabs make it easy to explore and switch between different views. Check out code for detail of usage.

Etiam nec ante eget lacus vulputate egestas non iaculis tellus. Suspendisse tempus ex in tortor venenatis malesuada. Aenean consequat dui vitae nibh lobortis condimentum. Duis vel risus est.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie. Vestibulum vel tristique libero. Morbi vulputate odio at viverra sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu leo.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus viverra magna, id pulvinar odio metus non enim. Ut id augue interdum, ultrices felis eu, tincidunt libero.

Tag 1 Tag 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore non atque?

      <div x-data="{activeTab:'tabHome'}" class="tabs flex flex-col">
        <div
          class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
        >
          <div class="tabs-list flex px-1.5 py-1">
            <button
              @click="activeTab = 'tabHome'"
              :class="activeTab === 'tabHome' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                />
              </svg>
              <span> Home </span>
            </button>
            <button
              @click="activeTab = 'tabProfile'"
              :class="activeTab === 'tabProfile' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
              <span>Profile</span>
            </button>
            <button
              @click="activeTab = 'tabMessages'"
              :class="activeTab === 'tabMessages' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                />
              </svg>
              <span>Messages</span>
            </button>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'tabHome'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
                Suspendisse tempus ex in tortor venenatis malesuada. Aenean
                consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabProfile'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
                Vestibulum vel tristique libero. Morbi vulputate odio at viverra
                sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
                leo.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
          <div
            x-show="activeTab === 'tabMessages'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
            <div>
              <p>
                Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
                viverra magna, id pulvinar odio metus non enim. Ut id augue
                interdum, ultrices felis eu, tincidunt libero.
              </p>
              <div class="flex space-x-2 pt-3">
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 1
                </a>
                <a
                  href="#"
                  class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
                >
                  Tag 2
                </a>
              </div>

              <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                dolore non atque?
              </p>
            </div>
          </div>
        </div>
      </div>