Home
ᴀʀ!ᴀ
FAQ with Tailwind CSS and Alpine.js

FAQ with Tailwind CSS and Alpine.js

This tailwind example is contributed by ᴀʀ!ᴀ, 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 ᴀʀ!ᴀ

501

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

FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

1 month ago

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

Author:
inbarajan P

10 months ago

1.5k
About Us Component

Author:
KULDEEP

1 week ago

142
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

11.7k
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

1 year ago

9.2k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

3 months ago

585
Frequently Asked Questions section

Author:
Brandon D

2 years ago

11.5k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18.7k
about video
about kelaplus video

Author:
Omer fils ELENGA

2 days ago

18
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

1 month ago

214
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

1 year ago

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

Author:
Nirav Patel

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components