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

13.6k

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

14.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18.1k
FAQ page

Author:
R Thapa

1 year ago

14.6k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

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

8.6k
FAQ section

Author:
Brandon D

2 years ago

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

16.1k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

Author:
Manuela Bianka

2 years ago

10.7k
Tailwind FAQ accordion

Author:
yousef

1 year ago

3.8k
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.

Author:
Ayyamperumal S

2 weeks ago

64
FAQ Section with AlpineJS

Author:
Maxim

4 weeks ago

224

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components