FAQ cards

FAQ section with cards

This tailwind example is contributed by Moriba Traore, on 23-May-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Moriba Traore

Tailwind v3.4 14.5k 18

Fork Fullscreen

<h3 class="mb-14 text-teal-900 text-center text-3xl font-semibold underline decoration-teal-200/80 lg:text-left xl:text-4xl">
        Frequently Asked Questions
    </h3>

<div class="my-6">
        <div
            class="rounded-t-2xl bg-teal-600/80  w-full cursor-pointer select-none border-2 border-teal-600/30 px-4 py-4 text-gray-100 transition duration-300 hover:border-teal-600/80 hover:text-white">
            <h4 class="text-lg font-medium">How do I create an account on the website?</h4>
        </div>
        <div
            class="inline-flex w-full rounded-b-2xl border-x-2 border-b-2 border-dashed border-teal-600/30 bg-teal-100/50 px-4 py-4 text-teal-800">
            <h5>
                To create an account, click on the "Sign Up" button located at the top right corner of the homepage.
                <br>
                Fill out the required information, including your name, email address, and password.
                <br>
                Click "Create Account" to complete the registration process.
            </h5>
        </div>
    </div>

<div class="my-6">
        <div
            class="rounded-t-2xl bg-teal-600/80 w-full cursor-pointer select-none border-2 border-teal-600/30 px-4 py-4 text-gray-100 transition duration-300 hover:border-teal-600/80 hover:text-white">
            <h4 class="text-lg font-medium">What payment methods do you accept?</h4>
        </div>
        <div
            class="inline-flex w-full rounded-b-2xl border-x-2 border-b-2 border-dashed border-teal-600/30 bg-teal-100/50 px-4 py-4 text-teal-800">
            <h5>We accept several payment methods for your convenience, including credit cards (Visa, Mastercard,
                American Express), PayPal, and Apple Pay.
            </h5>
        </div>
    </div>

<div class="my-6">
        <div
            class="rounded-t-2xl bg-teal-600/80 w-full cursor-pointer select-none border-2 border-teal-600/30 px-4 py-4 text-gray-100 transition duration-300 hover:border-teal-600/80 hover:text-white">
            <h4 class="text-lg font-medium">How long does shipping take?</h4>
        </div>
        <div
            class="inline-flex w-full rounded-b-2xl border-x-2 border-b-2 border-dashed border-teal-600/30 bg-teal-100/50 px-4 py-4 text-teal-800">
            <h5>
                Shipping times may vary depending on your location and the product you ordered.
                <br>
                We strive to process and ship orders within 1-2 business days after payment confirmation.
            </h5>
        </div>
    </div>

</section>

Related Examples

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

King Kali

3 years ago

17.2k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
FAQ page

R Thapa

3 years ago

16.1k
Frequently Asked Questions section

Brandon D

3 years ago

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

Anonymous

2 years ago

10.6k
FAQ section

Brandon D

3 years ago

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

Abhijit Sen

3 years ago

18.6k
Frequently asked questions (FAQ)

Brandon D

3 years ago

13.2k
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
Tailwind FAQ accordion

yousef

2 years ago

6.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.

Ayyamperumal S

1 year ago

1.7k
FAQ with Search

Dpk Mht

2 years ago

2.9k