Tabs

ADMIN PANEL

Tab Lifted

You can use lifted tab style as code show bellow

Preview Html
Title 1 Title 2

Faux real sexy split up the back pockets cut out detail black and orange print thick fabric skirt. Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Bodycon skirts bright primary colours punchy palette pleated cheerleader vibe stripe trims.

Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora 

 <div class="w-full">  
   <div class="tabs">
      <a class="tab tab-lifted tab-active tab-link" data-tabFilter="1">Title 1  </a>   
      <a class="tab tab-lifted tab-link" data-tabFilter="2">Title 2  </a>   
   </div>
   <div class="tabs-content">
      <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5">
          <p class="text-xs text-gray-500"> Modern tailoring flattering A-Line midi skirt stunning feminine silhouette sided pleats silver zip. Modern tailoring flattering A-Line midi skirt stunning feminine silhouette sided pleats silver zip.  </p>
      </div>
      <div data-tabContent="2" class="tab-pan fade first:rounded-tl-none rounded-5">
          <p class="text-xs text-gray-500"> Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora </p>
      </div> 
   </div> 
</div>

Tab Normal

You can use normal tab as code show bellow

Preview Html
Description 1 Description 2

Faux real sexy split up the back pockets cut out detail black and orange print thick fabric skirt. Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Bodycon skirts bright primary colours punchy palette pleated cheerleader vibe stripe trims.

Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora 

 <div class="w-full">  
   <div class="tabs">
      <a class="tab tab-active tab-link" data-tabFilter="1">Description 1  </a>   
      <a class="tab tab-link" data-tabFilter="2">Description 2  </a>   
   </div>
   <div class="tabs-content">
      <div data-tabContent="1" class="border-none rounded-none tab-pan fade active show">
          <p class="text-xs text-gray-500"> Faux real sexy split up the back pockets cut out detail  black and orange print thick fabric skirt. Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Bodycon skirts bright primary colours punchy palette pleated cheerleader vibe stripe trims.  </p>
      </div>
      <div data-tabContent="2" class="border-none rounded-none tab-pan fade">
          <p class="text-xs text-gray-500"> Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora Black knicker lining concealed back zip fasten swing style high waisted double layer full pattern floral. Micro minis floor-sweeping maxi skirts matchy-matchy decora  </p>
      </div>
   </div> 
</div>

With Bordered

Set bordered tabs using .tab-bordered class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
  <div class="flex-col w-full tabs">
      <div class="flex mb-1 tab-links">
          <button class="tab tabs-bordered tab-active tab-link" data-tabFilter="1"> Title </button>
          <button class="tab tabs-bordered tab-link" data-tabFilter="2"> Description </button>
          <button class="tab tabs-bordered tab-link" data-tabFilter="3"> Others </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>

With Boxed

Use boxed tab by adding class .tabs-boxed

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
   <div class="flex-col w-full tabs">
      <div class="flex mb-1 tab-links">
          <button class="tab tab-boxed tab-active tab-link" data-tabFilter="1">Home </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="2"> Profile </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="3"> Contacts </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>

Vertical Tabs

Use vertical tabs by using tabs-vertical class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2 tabs">
   <div class="flex w-full sm:block">
      <div class="mb-1 flex flex-col justify-center tab-links min-w-[130px]">
          <button class="tab tab-vertical tab-active tab-link" data-tabFilter="1"> Home </button>
          <button class="tab tab-vertical tab-link" data-tabFilter="2"> Tasks </button>
          <button class="tab tab-vertical tab-link" data-tabFilter="3"> Location </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan px-[15px] fade active show first:rounded-tl-none rounded-5 border-none !pt-2"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan px-[15px] fade group relative first:rounded-tl-none rounded-5 border-none !pt-2"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan px-[15px] fade group relative first:rounded-tl-none rounded-5 border-none !pt-2"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
   </div> 
</div>

Vertical Boxed Tabs

Use vertical boxed tabs by using tab-boxed class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2 tabs">
  <div class="flex w-full sm:block">
      <div class="mb-1 flex flex-col justify-center min-w-[130px] tab-links">
          <button class="tab tab-boxed tab-active tab-link" data-tabFilter="1"> Home </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="2"> Tasks </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="3"> Location </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan px-[15px] fade active show first:rounded-tl-none rounded-5 border-none !pt-2> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan px-[15px] fade group relative first:rounded-tl-none rounded-5 border-none !pt-2"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan px-[15px] fade group relative first:rounded-tl-none rounded-5 border-none !pt-2"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>

Centered Tabs

Set Centered tabs using justify-center class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
   <div class="flex-col w-full tabs">
      <div class="flex justify-center mb-1 tab-links">
          <button class="tab tabs-bordered tab-active tab-link" data-tabFilter="1"> Dark </button>
          <button class="tab tabs-bordered tab-link" data-tabFilter="2"> Light </button>
          <button class="tab tabs-bordered tab-link" data-tabFilter="3"> System </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
   </div> 
</div>

Ended Tabs

Set Centered tabs using justify-end class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
  <div class="flex-col w-full tabs">
      <div class="flex justify-end mb-1 tab-links 2sm:justify-center">
          <button class="tab tab-boxed tab-active tab-link" data-tabFilter="1"> Product </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="2"> Price </button>
          <button class="tab tab-boxed tab-link" data-tabFilter="3"> Offer </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>

Colored Tabs

You can add background using tabs-bordered-bg class with tabs-bordered class.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
  <div class="flex-col w-full tabs">
      <div class="flex mb-1 tab-links">
          <button class="tab tabs-bordered tabs-bordered-bg tab-active tab-link" data-tabFilter="1"> Products </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="2"> Reviews </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="3"> More </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>

Tabs With Icons

You can set icons with tabs.

Preview Html

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

We use tabs to manage space and to make the website more attractive. Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.

Tabs are used to navigate and display different content around the website. abs are used to navigate and display different content around the website.

<div class="flex flex-wrap gap-2">
  <div class="flex-col w-full tabs">
      <div class="flex mb-1 tab-links">
          <button class="tab tabs-bordered tabs-bordered-bg tab-active tab-link" data-tabFilter="1">
              +iconly('mr-2', 'User2', 'text-[18px]', ['1','2'], 'path_formatter') Profile </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="2">
             +iconly('mr-2', 'Message', 'text-[18px]', ['1','2'], 'path_formatter') Message </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="3">
             +iconly('mr-2', 'Setting', 'text-[18px]', ['1','2'], 'path_formatter') Setting </button>
      </div>
      <div class="tabs-content">
          <div data-tabContent="1" class="tab-pan fade active show first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
          <div data-tabContent="3" class="tab-pan fade group relative first:rounded-tl-none rounded-5 border-none !px-0 !pb-0"> 
              <p class="text-xs text-gray-500"> Tabs are used to ...websites.</p>  
          </div>
      </div>
  </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now