Components : Frequently Asked Questions

Preview content adapted to proportion

Frequently Asked Questions

FAQ

To provide users with quick and easy access to frequently asked information, enhancing user experience and reducing support load.

Displaying a series of common questions with expandable answers for user inquiries.

Users can click on each question to expand or collapse the answer. The '+' icon changes size on hover to indicate interactivity.


The component uses a grid layout that adjusts from one column on mobile devices to two columns on larger screens, ensuring readability and aesthetic appeal across devices.

Date : June 12, 2025
Views : 24
Copys : 0

fa-tags

Customer support websites, product landing pages, knowledge bases, membership portals

Code

<div class="max-w-7xl mx-auto px-4 py-12">
 <h2 class="text-4xl font-bold text-[#2D3748] mb-12 text-center">
  Frequently Asked Questions
 </h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     How do I get started?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     Begin by creating your account and exploring the dashboard. Our onboarding tutorial will guide you through basic features and settings configuration.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Payment methods accepted?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     We accept all major credit cards including Visa, MasterCard, and American Express. Crypto payments and PayPal are also supported.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Data security measures?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     All data is encrypted using AES-256 standards. Regular security audits and two-factor authentication ensure maximum protection for your information.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Cancellation policy?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     You can cancel anytime with no hidden fees. We offer full refunds for annual plans cancelled within 30 days of purchase.
    </p>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="max-w-7xl mx-auto px-4 py-12">
  <h2 class="text-4xl font-bold text-[#2D3748] mb-12 text-center">
   Frequently Asked Questions
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
   <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
    <div class="flex justify-between items-center">
     <h3 class="text-lg font-semibold text-[#4A5568]">
      How do I get started?
     </h3>
     <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
      ➕
     </span>
    </div>
    <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
     <hr class="my-4 border-[#4A5568]/20"/>
     <p class="text-[#4A5568]">
      Begin by creating your account and exploring the dashboard. Our onboarding tutorial will guide you through basic features and settings configuration.
     </p>
    </div>
   </div>
   <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
    <div class="flex justify-between items-center">
     <h3 class="text-lg font-semibold text-[#4A5568]">
      Payment methods accepted?
     </h3>
     <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
      ➕
     </span>
    </div>
    <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
     <hr class="my-4 border-[#4A5568]/20"/>
     <p class="text-[#4A5568]">
      We accept all major credit cards including Visa, MasterCard, and American Express. Crypto payments and PayPal are also supported.
     </p>
    </div>
   </div>
   <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
    <div class="flex justify-between items-center">
     <h3 class="text-lg font-semibold text-[#4A5568]">
      Data security measures?
     </h3>
     <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
      ➕
     </span>
    </div>
    <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
     <hr class="my-4 border-[#4A5568]/20"/>
     <p class="text-[#4A5568]">
      All data is encrypted using AES-256 standards. Regular security audits and two-factor authentication ensure maximum protection for your information.
     </p>
    </div>
   </div>
   <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
    <div class="flex justify-between items-center">
     <h3 class="text-lg font-semibold text-[#4A5568]">
      Cancellation policy?
     </h3>
     <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
      ➕
     </span>
    </div>
    <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
     <hr class="my-4 border-[#4A5568]/20"/>
     <p class="text-[#4A5568]">
      You can cancel anytime with no hidden fees. We offer full refunds for annual plans cancelled within 30 days of purchase.
     </p>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyFAQComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFAQComponent = () => {
    return (
<div>
<div class="max-w-7xl mx-auto px-4 py-12">
 <h2 class="text-4xl font-bold text-[#2D3748] mb-12 text-center">
  Frequently Asked Questions
 </h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     How do I get started?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     Begin by creating your account and exploring the dashboard. Our onboarding tutorial will guide you through basic features and settings configuration.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Payment methods accepted?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     We accept all major credit cards including Visa, MasterCard, and American Express. Crypto payments and PayPal are also supported.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Data security measures?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     All data is encrypted using AES-256 standards. Regular security audits and two-factor authentication ensure maximum protection for your information.
    </p>
   </div>
  </div>
  <div class="group relative bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
   <div class="flex justify-between items-center">
    <h3 class="text-lg font-semibold text-[#4A5568]">
     Cancellation policy?
    </h3>
    <span class="text-2xl text-[#FF6B6B] transform transition-transform duration-300 group-hover:scale-110">
     ➕
    </span>
   </div>
   <div class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] max-h-0 group-hover:max-h-96">
    <hr class="my-4 border-[#4A5568]/20"/>
    <p class="text-[#4A5568]">
     You can cancel anytime with no hidden fees. We offer full refunds for annual plans cancelled within 30 days of purchase.
    </p>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyFAQComponent;

Recommended Related Components

More+

Frequently Asked Questions Component

It is used to provide quick and easy access to frequently asked questions, improving user engagement and reducing the need for direct support.

39
0

Frequently Asked Questions

The component is used to provide users with quick access to common inquiries, improving user experience by allowing them to find information efficiently.

37
0

Frequently Asked Questions

To provide users with quick and easy access to frequently asked information, enhancing user experience and reducing support load.

24
0

Frequently Asked Questions Component

Ideal for customer support pages, help centers, or any website that needs to address common user inquiries in an organized manner.

16
0