Home
Michael Andreuzza
tabs with Tailwind CSS and Alpinejs

tabs with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Tabs

Author Michael Andreuzza

1.3k

4

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="bg-white">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col lg:h-svh justify-center py-24 lg:py-96 relative p-8">
  <div class="text-base text-gray-500 ">
   <div>
    <h1>Tabs</h1>
    <p class="text-balance">
     Test the tabs by clicking on the button below.
    </p>
   </div>
  </div> 
  <div x-data="{ activeTab: 0 }" class="mx-auto w-full mt-6 border-t pt-12">
   
   <ul role="tablist" class="-mb-px flex items-stretch gap-2 text-slate-500">
    
    <li> <button @click="activeTab = 0" :aria-selected="activeTab === 0" :class="{ 'bg-orange-50 text-orange-600': activeTab === 0 }" class="flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-medium bg-orange-50 text-orange-600" role="tab" aria-selected="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path>
      </svg> <span>My Account</span></button> </li> 
    <li> <button @click="activeTab = 1" :aria-selected="activeTab === 1" :class="{ 'bg-orange-50 text-orange-600': activeTab === 1 }" class="flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-medium" role="tab" aria-selected="false"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
       <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"></path>
      </svg> <span>Billing</span></button> </li>
   </ul> 
   <div role="tabpanels" class="rounded-b-md border rounded-xl overflow-hidden border-gray-200 mt-2 bg-white">
    
    <section x-show="activeTab === 0" role="tabpanel" class="p-8">
     <ul role="list" class="divide-y divide-gray-100">
      <li class="relative flex justify-between gap-x-6 py-3 px-6">
       <div class="flex min-w-0 gap-x-4"> <img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://alfred.lexingtonthemes.com/avatar1.png" alt="">
        <div class="min-w-0 flex-auto">
         <p class="text-sm font-semibold leading-6 text-gray-900"> <a href="#"> <span class="absolute inset-x-0 -top-px bottom-0"></span>
           Michael Andreuzza
          </a> </p>
         <p class="mt-1 flex text-xs leading-5 text-gray-500"> <a href="mailto:leslie.alexander@example.com" class="relative truncate hover:underline">michae.andreuzza@example.com</a> </p>
        </div>
       </div>
       <div class="flex shrink-0 items-center gap-x-4">
        <div class="hidden sm:flex sm:flex-col sm:items-end">
         <p class="text-sm leading-6 text-gray-900">
          Co-Founder / CEO
         </p>
         <p class="mt-1 text-xs leading-5 text-gray-500">
          Last seen <time datetime="2023-01-23T13:23Z">3h ago</time> </p>
        </div> <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path>
        </svg>
       </div>
      </li>
     </ul>
    </section> 
    <section x-show="activeTab === 1" role="tabpanel" class="p-8" style="display: none;">
     <dl class="mx-auto grid grid-cols-1 gap-px bg-gray-900/5 sm:grid-cols-2 lg:grid-cols-4">
      <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white sm:px-6 xl:px-8">
       <dt class="text-sm font-medium leading-6 text-gray-500">
        Revenue
       </dt>
       <dd class="text-xs font-medium text-gray-700">+4.75%</dd>
       <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
        $405,091.00
       </dd>
      </div>
      <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 sm:px-6 xl:px-8">
       <dt class="text-sm font-medium leading-6 text-gray-500">
        Overdue invoices
       </dt>
       <dd class="text-xs font-medium text-rose-600">+54.02%</dd>
       <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
        $12,787.00
       </dd>
      </div>
      <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 sm:px-6 xl:px-8">
       <dt class="text-sm font-medium leading-6 text-gray-500">
        Outstanding invoices
       </dt>
       <dd class="text-xs font-medium text-gray-700">-1.39%</dd>
       <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
        $245,988.00
       </dd>
      </div>
      <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 sm:px-6 xl:px-8">
       <dt class="text-sm font-medium leading-6 text-gray-500">
        Expenses
       </dt>
       <dd class="text-xs font-medium text-rose-600">+10.18%</dd>
       <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
        $30,156.00
       </dd>
      </div>
     </dl>
    </section>
   </div>
  </div> 
  
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a set of tabs with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-tab-component-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/tabs/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

cards
cards with background animation

Author:
Anonymous

6 months ago

1.4k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.4k
Tab navigation with alpine JS

Author:
Mr Robot

2 years ago

14.5k
Icon group

Author:
Conan Hilton

1 year ago

8.8k
Switch tabs button

Author:
gmer33

1 year ago

12.9k
Tab navigation buttons

Author:
Simon Scheffer

1 year ago

14.5k
Working tabs switch

Author:
Fagundo67

1 year ago

13k
Tab Switch
tab-switching example with tailwind and vanilla JS

Author:
Prajwal Hallale

1 year ago

7k
Tabs section

Author:
Simon Scheffer

1 year ago

11.5k
Tab Menu
Tab menu

Author:
Samuel Abera

7 months ago

3.9k
image gallery
image gallery [lightbox]

Author:
Prasertsak ฟาร์มวันหยุด

5 months ago

1.5k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

4 months ago

971

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8