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

650

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
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.7k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

177
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

9 months ago

1.8k
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

4 months ago

638
FAQs
This is a FAQ it is made using html and tailwindcss

Author:
ishimwe shadad

5 months ago

612
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

5 months ago

449
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

2 weeks ago

117
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

342
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

Author:
Dika Rahman

1 year ago

1.5k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 months ago

256
FAQ section

Author:
Brandon D

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components