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

2.2k

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

Product features list with inner border

Author:
Lîmåã M

2 years ago

14.3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.4k
Features grid with icon

Author:
Freja Jensen

2 years ago

11.2k
Video Player
Youtube Video Player

Author:
KULDEEP

6 months ago

729
Features

Author:
Michael Andreuzza

1 year ago

5.2k
Hotel rooms
A simple room overview

Author:
Matti

1 year ago

1.5k
Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

1.1k
Simple Features section

Author:
Odessa Young

2 years ago

16.9k
Showcase
A version of an showcase.

Author:
Matti

1 year ago

1.4k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

811
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.

Author:
Hezron Okoko

1 year ago

2.7k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components