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

14.1k

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

2 years ago

15.9k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.4k
FAQ page

Author:
R Thapa

2 years ago

15.3k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

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

2 years ago

9.9k
FAQ section

Author:
Brandon D

2 years ago

11k
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.8k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

Author:
Manuela Bianka

3 years ago

11.8k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5k
Cards Seaction - Services block

Author:
ABDO-SY

8 months ago

1.4k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

4 months ago

813

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components