Component:
Team Fintech Glassmorphism
Colors:
Description:
This carefully crafted Team 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: Team
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content, 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="mb-20">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-white mb-4">
Leadership Team
</h3>
<p class="text-gray-300 max-w-2xl mx-auto">
Meet the experienced leaders driving our mission to transform
financial services.
</p>
</div>
<div class="grid md:grid-cols-2 lg: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-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 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-1.webp"
/>
</div>
</div>
<div class="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Sarah Chen
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
CEO & Co-Founder
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Former Goldman Sachs VP with 15+ years in fintech. Led digital
transformation initiatives at major banks.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 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-2.webp"
/>
</div>
</div>
<div class="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Michael Rodriguez
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
CTO & Co-Founder
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Ex-Google engineer specializing in distributed systems. Built
payment infrastructure serving millions.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 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="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Emily Watson
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
Head of Product
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Product leader from Stripe with expertise in developer tools and
API design. Stanford CS graduate.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="David Kim"
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-5.webp"
/>
</div>
</div>
<div class="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
David Kim
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
VP of Engineering
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Former Amazon principal engineer. Expert in scalable
architecture and security systems.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Lisa Thompson"
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-8.webp"
/>
</div>
</div>
<div class="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Lisa Thompson
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
Head of Design
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Design leader from Apple with focus on financial UX. Creates
intuitive experiences for complex systems.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full overflow-hidden ring-4 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="James Wilson"
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-7.webp"
/>
</div>
</div>
<div class="text-center space-y-2">
<h3
class="text-xl font-bold text-white group-hover:text-blue-300 transition-colors duration-300"
>
James Wilson
</h3>
<p
class="text-purple-400 font-medium group-hover:text-purple-300 transition-colors duration-300"
>
VP of Sales
</p>
</div>
<p
class="text-gray-300 text-sm leading-relaxed text-center group-hover:text-gray-200 transition-colors duration-300"
>
Enterprise sales veteran from Salesforce. Specializes in fintech
partnerships and growth strategies.
</p>
<div class="flex justify-center">
<button
class="p-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg transition-all duration-300 hover:scale-110"
>
<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-users w-4 h-4 text-blue-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</button>
</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