Component:
Faq Fintech Glassmorphism
Colors:
Description:
This carefully crafted FAQ component is perfect for Fintech landing pages, featuring a Glassmorphic design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: FAQ
@industry: Fintech
@style: Glassmorphism
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section
class="relative py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10 container mx-auto px-4">
<div class="">
<div
class="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-8 max-w-4xl mx-auto"
>
<div class="text-center mb-8">
<div class="flex items-center justify-center space-x-3 mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-circle-help w-8 h-8 text-purple-400"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>
<h3 class="text-3xl font-bold text-white">
Frequently Asked Questions
</h3>
</div>
<p class="text-gray-300">
Get answers to common questions about our pricing and plans.
</p>
</div>
<div class="space-y-4">
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>Can I change my plan at any time?</span
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
Yes, you can upgrade or downgrade your plan at any time. Changes
take effect immediately, and we'll prorate any billing
adjustments on your next invoice.
</p>
</div>
</div>
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>What happens if I exceed my transaction limit?</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
If you exceed your monthly transaction limit, we'll
automatically charge you for the additional transactions at our
standard overage rate. You'll receive notifications as you
approach your limit.
</p>
</div>
</div>
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>Do you offer custom pricing for high-volume customers?</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
Yes, we offer custom pricing for businesses with high
transaction volumes or specific requirements. Contact our sales
team to discuss a tailored solution for your needs.
</p>
</div>
</div>
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>Is there a setup fee or long-term contract required?</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
No setup fees and no long-term contracts required. You can start
with our monthly plans and cancel anytime. Annual plans offer
significant savings with the flexibility to change as needed.
</p>
</div>
</div>
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>What payment methods do you accept?</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
We accept all major credit cards, bank transfers, and digital
wallets. Enterprise customers can also set up invoicing and
purchase orders for their convenience.
</p>
</div>
</div>
<div
x-data="{ open: false }"
class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 transform transition-all duration-300 hover:bg-white/15"
>
<button
@click="open = !open"
class="flex items-center justify-between w-full text-left"
>
<span class="text-white font-semibold pr-4"
>How does the free trial work?</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 text-purple-400 flex-shrink-0"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
x-show="open"
x-transition
class="mt-4 text-gray-300 leading-relaxed"
>
<p>
Our 14-day free trial gives you full access to all Professional
plan features with no credit card required. You can process up
to 100 test transactions to evaluate our platform.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page