Components : Frequently Asked Questions

Preview content adapted to proportion

Frequently Asked Questions

FAQ

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

This component displays a series of frequently asked questions in a structured and interactive manner. Each question is accompanied by an answer that can be toggled visible or hidden on user interaction.

Users can click or hover over the question headers to expand or collapse the corresponding answers. The interaction is visualized with a rotating chevron icon and smooth animations for expanding/collapsing content.


The layout adjusts responsively based on screen size, with a single column on smaller screens and a two-column grid on larger screens (md and lg breakpoints). Padding also scales with screen size for better readability and aesthetics.

Date : June 05, 2025
Views : 37
Copys : 0

fa-tags

Customer support websites FAQ sections on product or service pages Help centers for applications or platforms

Code

<div class="bg-gray-900 min-h-screen p-8 md:p-12 lg:p-16">
 <div class="max-w-6xl mx-auto">
  <h2 class="text-4xl font-bold text-blue-400 mb-12 text-center">
   Frequently Asked Questions
  </h2>
  <div class="grid md:grid-cols-2 gap-8">
   <div class="space-y-6">
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Account Setup Process
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Our onboarding system guides you through step-by-step verification with real-time status indicators and automated document checks.
     </p>
    </div>
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Security Protocols
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Multi-layered protection including biometric authentication, military-grade encryption, and behavior analysis algorithms.
     </p>
    </div>
   </div>
   <div class="space-y-6">
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Payment Methods
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      We support 135+ currencies with instant conversion rates, blockchain transactions, and smart contract verification systems.
     </p>
    </div>
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       API Integration
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Modular architecture with webhook support, rate limiting controls, and comprehensive developer documentation portal.
     </p>
    </div>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="bg-gray-900 min-h-screen p-8 md:p-12 lg:p-16">
  <div class="max-w-6xl mx-auto">
   <h2 class="text-4xl font-bold text-blue-400 mb-12 text-center">
    Frequently Asked Questions
   </h2>
   <div class="grid md:grid-cols-2 gap-8">
    <div class="space-y-6">
     <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
      <div class="flex justify-between items-center cursor-pointer">
       <h3 class="text-xl font-semibold text-white">
        Account Setup Process
       </h3>
       <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
        🔻
       </span>
      </div>
      <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
       Our onboarding system guides you through step-by-step verification with real-time status indicators and automated document checks.
      </p>
     </div>
     <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
      <div class="flex justify-between items-center cursor-pointer">
       <h3 class="text-xl font-semibold text-white">
        Security Protocols
       </h3>
       <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
        🔻
       </span>
      </div>
      <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
       Multi-layered protection including biometric authentication, military-grade encryption, and behavior analysis algorithms.
      </p>
     </div>
    </div>
    <div class="space-y-6">
     <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
      <div class="flex justify-between items-center cursor-pointer">
       <h3 class="text-xl font-semibold text-white">
        Payment Methods
       </h3>
       <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
        🔻
       </span>
      </div>
      <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
       We support 135+ currencies with instant conversion rates, blockchain transactions, and smart contract verification systems.
      </p>
     </div>
     <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
      <div class="flex justify-between items-center cursor-pointer">
       <h3 class="text-xl font-semibold text-white">
        API Integration
       </h3>
       <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
        🔻
       </span>
      </div>
      <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
       Modular architecture with webhook support, rate limiting controls, and comprehensive developer documentation portal.
      </p>
     </div>
    </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="bg-gray-900 min-h-screen p-8 md:p-12 lg:p-16">
 <div class="max-w-6xl mx-auto">
  <h2 class="text-4xl font-bold text-blue-400 mb-12 text-center">
   Frequently Asked Questions
  </h2>
  <div class="grid md:grid-cols-2 gap-8">
   <div class="space-y-6">
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Account Setup Process
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Our onboarding system guides you through step-by-step verification with real-time status indicators and automated document checks.
     </p>
    </div>
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Security Protocols
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Multi-layered protection including biometric authentication, military-grade encryption, and behavior analysis algorithms.
     </p>
    </div>
   </div>
   <div class="space-y-6">
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       Payment Methods
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      We support 135+ currencies with instant conversion rates, blockchain transactions, and smart contract verification systems.
     </p>
    </div>
    <div class="group bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700">
     <div class="flex justify-between items-center cursor-pointer">
      <h3 class="text-xl font-semibold text-white">
       API Integration
      </h3>
      <span class="text-2xl text-purple-300 transform transition-transform duration-300 group-hover:rotate-180">
       🔻
      </span>
     </div>
     <p class="text-gray-300 mt-4 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-96">
      Modular architecture with webhook support, rate limiting controls, and comprehensive developer documentation portal.
     </p>
    </div>
   </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.

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

15
0