accordion with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Michael Andreuzza

Tailwind v3.4 2.9k 2

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

Features list with images and description

Noah Schmidt

3 years ago

15.1k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

SAURAV SINGH

1 year ago

1.1k
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Matti

1 year ago

2.2k
Simple Features section

Odessa Young

3 years ago

17.8k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Hezron Okoko

2 years ago

3.4k
Features grid

Sophia Baker

3 years ago

10.8k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Computer guy

3 years ago

13.3k
Product features list with inner border

Lîmåã M

3 years ago

15.1k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

945
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

3 years ago

26.7k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k