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 ᴀʀ!ᴀ

134

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

FAQ page

Author:
R Thapa

1 year ago

14.6k
FAQ section

Author:
Simon Scheffer

2 years ago

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

Author:
Nirav Patel

1 year ago

1.7k
FAQ with Search

Author:
Dpk Mht

10 months ago

1.7k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18.2k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.2k
Simple expanded FAQ example

Author:
Orson Kincaid

6 months ago

1.1k
FAQ section

Author:
Brandon D

2 years ago

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

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

16.2k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components