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

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

16.3k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k
FAQ page

Author:
R Thapa

2 years ago

15.4k
Frequently Asked Questions section

Author:
Brandon D

3 years ago

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

10.1k
FAQ section

Author:
Brandon D

3 years ago

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

18k
Frequently asked questions (FAQ)

Author:
Brandon D

3 years ago

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

Author:
Manuela Bianka

3 years ago

11.9k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5.5k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.2k
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Author:
Nirav Patel

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components