Home
Moriba Traore
FAQ cards

FAQ cards

FAQ section with cards

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

FAQ

Author Moriba Traore

14k

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.

Author:
King Kali

1 year ago

15.6k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.1k
FAQ page

Author:
R Thapa

2 years ago

15.1k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

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

9.6k
FAQ section

Author:
Brandon D

2 years ago

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

17.5k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

Author:
Manuela Bianka

3 years ago

11.7k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.8k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

566
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components