Dexo - Premium Admin Template

Tabs

Tabs

You can set tabs using tabs class.

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.

  <div class="flex flex-wrap gap-2">
  <div class="w-full .tabs flex-col">
      <div class="mb-1 tab-links flex">
          <button class="tab tab-lifted tab-active tab-link" data-tabFilter="1"> Title 1 </button>
          <button class="tab tab-lifted tab-link" data-tabFilter="2"> Title 2 </button>
      </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"> Tabs are used ...attractive.</p>  
          </div>
          <div data-tabContent="2" class="tab-pan fade group relative first:rounded-tl-none rounded-5"> 
              <p class="text-xs text-gray-500"> We use tabs to ...attractive.</p>  
          </div>
      </div>
  </div> 
</div>

Without Bordered

You can set tabs without tabs borded using bordered-none class.

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. abs are used to navigate and display different content around the website.

  <div class="flex flex-wrap gap-2">
   <div class="w-full tabs flex-col">
      <div class="mb-1 tab-links flex">
          <button class="tab tab-lifted tab-active tab-link" data-tabFilter="1"> Description 1 </button>
          <button class="tab tab-lifted tab-link" data-tabFilter="2"> Description 2 </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>
  </div> 
</div>

With Bordered

You can set bordered tabs using tabs-bordered class.

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="w-full tabs flex-col">
      <div class="mb-1 tab-links flex">
          <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

You can add boxed tabs using tabs-boxed class.

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="w-full tabs flex-col">
      <div class="mb-1 tab-links flex">
          <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

You can set vertical tabs using tab-vertical class.

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="w-full flex sm:block tabs">
      <div class="mb-1 flex flex-col justify-center tab-links flexmin-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 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 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 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

You can set vertical Boxed tabs using tab-boxed class.

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="w-full flex sm:block tabs">
      <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 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 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 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

You can set tabs centered using justify-center class.

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="w-full tabs flex-col">
      <div class="mb-1 justify-center tab-links flex">
          <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

You can set tabs at the end using justify-end class.

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="w-full tabs flex-col">
      <div class="mb-1 justify-end tab-links flex 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.

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="w-full tabs flex-col">
      <div class="mb-1 tab-links flex">
          <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.

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="w-full tabs flex-col">
      <div class="mb-1 tab-links flex">
          <button class="tab tabs-bordered tabs-bordered-bg tab-active tab-link" data-tabFilter="1">
              +SVG_ICON("2-User","w-[18px] h-[18px] stroke-title") Profile </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="2">
              +SVG_ICON("Message","w-[18px] h-[18px] stroke-title") Message </button>
          <button class="tab tabs-bordered tabs-bordered-bg tab-link" data-tabFilter="3">
              +SVG_ICON("Setting","w-[18px] h-[18px] stroke-title") 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>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer

Template Mode
Choose template mode dark & light
Layout Type
Choose layout Ltr & Rtl
Sidebar Type
Choose Sidebar icon & full
Monochrome Mode