Home
ariaw
FAQ with Tailwind CSS and Alpine.js

FAQ with Tailwind CSS and Alpine.js

This tailwind example is contributed by ariaw, on 18-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author ariaw

915

Fork Fullscreen

<div class="flex h-screen items-center justify-center">
  <div class="mx-auto w-full max-w-2xl px-2" x-data="faq">
    <h1 class="mb-8 text-center text-3xl font-bold">Frequently Asked Questions</h1>

<div class="mb-4 rounded-lg border bg-white">
      <button @click="toggle(1)" class="flex w-full items-center justify-between px-6 py-4 text-left focus:outline-none">
        <span class="text-lg font-semibold">What is Tailwind CSS?</span>
        <span x-text="isOpen(1) ? '−' : '+'"></span>
      </button>
      <div x-show="isOpen(1)" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="px-6 pb-4">
        <p class="text-gray-600">Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.</p>
      </div>
    </div>

<div class="mb-4 rounded-lg border bg-white">
      <button @click="toggle(2)" class="flex w-full items-center justify-between px-6 py-4 text-left focus:outline-none">
        <span class="text-lg font-semibold">What is Alpine.js?</span>
        <span x-text="isOpen(2) ? '−' : '+'"></span>
      </button>
      <div x-show="isOpen(2)" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="px-6 pb-4">
        <p class="text-gray-600">Alpine.js is a minimal framework for composing behavior directly in your HTML. It's like jQuery for the modern web.</p>
      </div>
    </div>

<div class="mb-4 rounded-lg border bg-white">
      <button @click="toggle(3)" class="flex w-full items-center justify-between px-6 py-4 text-left focus:outline-none">
        <span class="text-lg font-semibold">How do I use Tailwind with Alpine.js?</span>
        <span x-text="isOpen(3) ? '−' : '+'"></span>
      </button>
      <div x-show="isOpen(3)" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="px-6 pb-4">
        <p class="text-gray-600">You can use Tailwind CSS for styling and Alpine.js for interactivity. They work seamlessly together to create lightweight, dynamic components.</p>
      </div>
    </div>
  </div>
</div>

Related Examples

Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Abhijit Sen

2 years ago

17.9k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Kevin

2 months ago

131
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

2k
FAQ with Search

Author:
Dpk Mht

1 year ago

2.4k
FAQ section

Author:
Simon Scheffer

3 years ago

10.9k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

1 year ago

1.7k
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Author:
Nirav Patel

1 year ago

2.3k
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

2 years ago

10.1k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

10 months ago

1.2k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5.3k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

7 months ago

579

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components