Component:
Testimonial Fintech Glassmorphism
Colors:
Description:
This carefully crafted Testimonial 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: Testimonial
@industry: Fintech
@style: Glassmorphism
@category: Social Proof, Feedback, Content
@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="mb-12">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-bold text-white">What Our Customers Say</h3>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-quote w-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<path
d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"
></path>
<path
d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"
></path>
</svg>
</div>
<div class="flex space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"This platform transformed our payment processing completely.
We've seen a 300% increase in transaction speed and our
customers love the seamless experience."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Sarah Chen"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Sarah Chen
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
CTO
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
TechFlow Solutions
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-quote w-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<path
d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"
></path>
<path
d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"
></path>
</svg>
</div>
<div class="flex space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"The security features are unmatched. We've had zero fraud
incidents since switching, and the compliance tools saved us
months of work."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Michael Rodriguez"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Michael Rodriguez
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Head of Security
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
SecureBank Corp
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-quote w-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<path
d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"
></path>
<path
d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"
></path>
</svg>
</div>
<div class="flex space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"Integration was incredibly smooth. Their API documentation is
excellent, and we were up and running in just two weeks instead
of the usual months."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Emily Watson"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Emily Watson
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Lead Developer
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
FinTech Innovations
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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