Home
Michael Andreuzza
accordion with Tailwind CSS and Alpinejs

accordion 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. similar terms for this example are Services,Why choose us

Feature showcase

Author Michael Andreuzza

1.9k

Fork Fullscreen

<section class="bg-white">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24  relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto w-full">
   <div>
    <h1>Accordion</h1>
    <p class="text-balance">
     Click on accordion items to see the content.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">
   
   <div x-data="{ openIndex: null }">
    <div class="border rounded-md overflow-hidden">
     
     <div class="border-b"> <button @click="openIndex === 0 ? openIndex = null : openIndex = 0" class="w-full flex justify-between items-center p-4 focus:outline-none text-gray-500 focus:text-orange-500"> <span>What time is it?</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 transform transition-transform" :class="{ 'rotate-45': openIndex === 0 }">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
       </svg> </button>
      <div x-show="openIndex === 0" class="p-4 border-t text-sm bg-gray-50 text-gray-500" style="display: none;">
       I don't know what time it is.
      </div>
     </div> 
     <div class="border-b"> <button @click="openIndex === 1 ? openIndex = null : openIndex = 1" class="w-full flex justify-between items-center p-4 focus:outline-none text-gray-500 focus:text-orange-500"> <span>Why not?</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 transform transition-transform" :class="{ 'rotate-45': openIndex === 1 }">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
       </svg> </button>
      <div x-show="openIndex === 1" class="p-4 text-gray-500 bg-gray-50 text-sm border-t" style="display: none;">
       Because I have lost the notion of time.
      </div>
     </div>
    </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 an accordion 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-an-accordion-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/accordion/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>
 </div>
</section>

Related Examples

Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Features list template

Author:
Lukas Müller

2 years ago

11k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

1.7k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.5k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.1k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

9 months ago

2k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.9k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.2k
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.7k
Feature cards

Author:
Fagundo67

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components