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

525

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

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

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

17k
FAQs
This is a FAQ it is made using html and tailwindcss

Author:
ishimwe shadad

2 months ago

197
FAQ section

Author:
Simon Scheffer

2 years ago

10.7k
Simple expanded FAQ example

Author:
Orson Kincaid

10 months ago

1.1k
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

6 months ago

973
Accordion FAQ

Author:
Nikola Małecka

6 months ago

790
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

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

Author:
Dika Rahman

10 months ago

1.2k
FAQ with Search

Author:
Dpk Mht

1 year ago

2k
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
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

164

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components