Component:
Free Demo-video Fintech Glassmorphism
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Demo video 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: Demo Video
@industry: Fintech
@style: Glassmorphism
@category: Page Section, 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="text-center mb-20 space-y-8">
<div class="inline-block">
<span
class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>🎥 Product Demos</span
>
</div>
<h2 class="text-5xl md:text-7xl font-bold leading-tight">
<span
class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
>See It in</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Action</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Watch our comprehensive demo videos to see how our platform can
transform your financial operations. From basic setup to advanced
features, we'll guide you through everything.
</p>
</div>
<div class="mb-20">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6"
>
<div class="space-y-6">
<div
class="relative aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900"
>
<img
alt="Demo Video"
class="w-full h-full object-cover"
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"
></div>
<div class="absolute inset-0 flex items-center justify-center">
<button
class="w-20 h-20 bg-white/20 backdrop-blur-md border border-white/30 rounded-full flex items-center justify-center hover:bg-white/30 hover:scale-110 transition-all duration-300"
>
<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-play w-8 h-8 text-white ml-1"
>
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg>
</button>
</div>
<div class="absolute top-4 left-4 right-4">
<div class="flex items-start justify-between">
<div
class="bg-black/60 backdrop-blur-sm rounded-lg p-3 max-w-md"
>
<h3 class="text-white font-semibold mb-1">
Platform Overview
</h3>
<p class="text-gray-300 text-sm">
Get a comprehensive tour of our fintech platform and see how
it can transform your business.
</p>
</div>
<div class="flex items-center space-x-2">
<button
class="p-2 bg-black/60 backdrop-blur-sm rounded-lg text-white hover:bg-black/80 transition-colors duration-300"
>
<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-maximize w-4 h-4"
>
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="space-y-2">
<div
class="flex items-center justify-between text-sm text-gray-400"
>
<span>0:00</span><span>3:00</span>
</div>
<div
class="relative h-2 bg-white/20 rounded-full overflow-hidden"
>
<div
class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-300"
style="width: 0%"
></div>
<div
class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg transition-all duration-300"
style="left: calc(0% - 8px)"
></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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-skip-back w-5 h-5 text-white"
>
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" x2="5" y1="19" y2="5"></line>
</svg></button
><button
class="p-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-xl transition-all duration-300 hover:scale-105"
>
<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-play w-6 h-6 text-white ml-1"
>
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg></button
><button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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-skip-forward w-5 h-5 text-white"
>
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" x2="19" y1="5" y2="19"></line>
</svg>
</button>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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-volume2 w-5 h-5 text-white"
>
<polygon
points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
></polygon>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
</svg>
</button>
<div
class="w-20 h-1 bg-white/20 rounded-full overflow-hidden"
>
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
style="width: 80%"
></div>
</div>
</div>
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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-settings w-5 h-5 text-white"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</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
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro 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