All Prompts
All Prompts
uitailwindmobilefinancemarketingresponsive
Mobile Banking App UI Showcase Block
UI-блок для демонстрации мобильного банкинга. Идеален для портфолио, финансов и маркетинга. Адаптивный дизайн с анимацией.
Prompt
<div class="flex min-h-screen items-center justify-center">
<div
class="relative flex max-w-7xl flex-col items-center justify-between gap-x-16 gap-y-16 overflow-hidden px-10 py-10 mt-12 mb-0 lg:flex-row lg:gap-24 lg:pt-0 lg:pb-0">
<!-- Background Gradient Effect -->
<!-- Phone Mockup (Left) -->
<div class="z-10 shrink-0 lg:mx-0 w-full max-w-[340px] mr-auto ml-auto relative">
<!-- Phone Frame -->
<div
class="border-[8px] overflow-hidden h-[700px] max-w-[400px] border-[#1a1a1a] ring-white/10 ring-1 rounded-[3rem] mr-auto ml-auto relative shadow-2xl bg-[#050505]">
<!-- Status Bar -->
<div class="absolute top-0 w-full h-12 px-6 flex justify-between items-center z-20 pt-2">
<span class="text-[13px] font-semibold text-white tracking-wide font-sans">
9:41
</span>
<div class="flex gap-1.5 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="currentColor"
class="text-white">
<path
d="M14.6 2.4C14.2 2 13.5 2 13.1 2.4L8 7.5 2.9 2.4C2.5 2 1.8 2 1.4 2.4C1 2.8 1 3.5 1.4 3.9L7.3 9.8C7.7 10.2 8.3 10.2 8.7 9.8L14.6 3.9C15 3.5 15 2.8 14.6 2.4Z"
class=""></path>
<path
d="M12.4 0.2C12 0.6 12 1.3 12.4 1.7L8 6.1 3.6 1.7C4 1.3 4 0.6 3.6 0.2C3.2 -0.2 2.5 -0.2 2.1 0.2L7.3 5.4C7.7 5.8 8.3 5.8 8.7 5.4L13.9 0.2C13.5 -0.2 12.8 -0.2 12.4 0.2Z"
class=""></path>
<path
d="M8 8.2C8.4 8.2 8.7 8.5 8.7 8.9C8.7 9.3 8.4 9.6 8 9.6C7.6 9.6 7.3 9.3 7.3 8.9C7.3 8.5 7.6 8.2 8 8.2Z"
class=""></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="currentColor"
class="text-white">
<path
d="M15 2H3C1.3 2 0 3.3 0 5V7C0 8.7 1.3 10 3 10H15C16.7 10 18 8.7 18 7V5C18 3.3 16.7 2 15 2ZM3 3H15C16.1 3 17 3.9 17 5V7C17 8.1 16.1 9 15 9H3C1.9 9 1 8.1 1 7V5C1 3.9 1.9 3 3 3Z"
class=""></path>
<path
d="M11.5 4H6.5C5.7 4 5 4.7 5 5.5V6.5C5 7.3 5.7 8 6.5 8H11.5C12.3 8 13 7.3 13 6.5V5.5C13 4.7 12.3 4 11.5 4Z"
class=""></path>
</svg>
</div>
</div>
<!-- Dynamic Notch -->
<div class="absolute top-2 left-1/2 -translate-x-1/2 w-28 h-7 bg-black rounded-full z-20 pointer-events-none">
</div>
<!-- App Content -->
<div class="flex flex-col bg-[#050505] w-full h-full pt-14 relative overflow-hidden font-sans">
<!-- Header -->
<div class="px-6 pb-4 flex justify-between items-center shrink-0 z-10">
<div class="">
<h1 class="text-2xl font-normal text-white tracking-tight font-oswald">
Portfolio
</h1>
<p class="text-xs text-gray-400 mt-0.5">
Welcome back, Alex
</p>
</div>
<button class="w-9 h-9 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white ring-1 ring-white/10 scroll-item scroll-fade-up delay-300" style="animation-play-state: running;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" class=""></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" class=""></path>
</svg>
</button>
</div>
<!-- Main Scroll Area -->
<div class="flex-1 overflow-y-auto p-4 space-y-4 pb-24 no-scrollbar z-0">
<!-- Balance Card -->
<div class="border-white/[0.08] overflow-hidden bg-[#121215] border rounded-3xl p-6 relative group">
<div
class="absolute top-0 right-0 w-full h-full bg-gradient-to-br from-indigo-500/10 via-transparent to-transparent pointer-events-none transition-opacity duration-500 group-hover:opacity-100 opacity-50">
</div>
<div class="flex justify-between items-start mb-6 relative z-10">
<div class="">
<p class="text-xs text-gray-400 font-medium mb-1">
Total Balance
</p>
<h2 class="text-3xl font-light text-white tracking-tight font-oswald">
$24,592.00
</h2>
</div>
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-green-500/10 border border-green-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
class="text-green-400">
<path d="m18 15-6-6-6 6" class=""></path>
</svg>
<span class="text-[10px] font-semibold text-green-400">
+12.5%
</span>
</div>
</div>
<!-- Chart Visual -->
<div class="flex gap-3 h-32 relative z-10 items-end justify-between px-1">
<!-- Bars -->
<div class="w-1/6 h-[40%] bg-white/5 rounded-t-md hover:bg-indigo-500/50 transition-colors"></div>
<div class="w-1/6 h-[60%] bg-white/5 rounded-t-md hover:bg-indigo-500/50 transition-colors"></div>
<div class="w-1/6 h-[50%] bg-white/5 rounded-t-md hover:bg-indigo-500/50 transition-colors"></div>
<div class="w-1/6 h-[75%] bg-white/5 rounded-t-md hover:bg-indigo-500/50 transition-colors"></div>
<div class="w-1/6 h-[100%] bg-indigo-500 rounded-t-md shadow-[0_0_15px_rgba(99,102,241,0.5)]"></div>
<div class="w-1/6 h-[65%] bg-white/5 rounded-t-md hover:bg-indigo-500/50 transition-colors"></div>
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-4 gap-2">
<button class="flex flex-col items-center gap-2 p-3 bg-[#121215] rounded-2xl border border-white/5 hover:bg-[#1A1A1E] transition-colors">
<div class="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</div>
<span class="text-[10px] font-medium text-gray-400">
Send
</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 bg-[#121215] rounded-2xl border border-white/5 hover:bg-[#1A1A1E] transition-colors">
<div class="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center text-green-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 12h14" class=""></path>
<path d="m12 19-7-7 7-7" class=""></path>
</svg>
</div>
<span class="text-[10px] font-medium text-gray-400">
Receive
</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 bg-[#121215] rounded-2xl border border-white/5 hover:bg-[#1A1A1E] transition-colors">
<div class="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<span class="text-[10px] font-medium text-gray-400">
Buy
</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 bg-[#121215] rounded-2xl border border-white/5 hover:bg-[#1A1A1E] transition-colors">
<div class="w-10 h-10 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<line x1="12" x2="12" y1="8" y2="16" class=""></line>
<line x1="8" x2="16" y1="12" y2="12" class=""></line>
</svg>
</div>
<span class="text-[10px] font-medium text-gray-400">
Top up
</span>
</button>
</div>
<!-- Assets List -->
<div class="bg-[#121215] rounded-3xl p-5 border border-white/[0.08] relative">
<div class="flex justify-between items-center mb-5">
<h2 class="text-base font-semibold text-white tracking-tight">
Your Assets
</h2>
<button class="text-xs font-medium text-blue-400 hover:text-blue-300">
View all
</button>
</div>
<div class="space-y-4">
<!-- Asset 1 -->
<div class="flex items-center justify-between group cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-9 h-9 rounded-full bg-[#1E1E22] flex items-center justify-center ring-1 ring-white/10 group-hover:ring-orange-500/50 transition-all">
<div
class="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center text-[8px] text-white font-semibold">
₿
</div>
</div>
<div>
<h3 class="text-sm font-medium text-white">
Bitcoin
</h3>
<p class="text-[10px] text-gray-500">BTC</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-medium text-white">
$43,290.50
</p>
<p class="text-[10px] text-green-400">+2.5%</p>
</div>
</div>
<!-- Asset 2 -->
<div class="flex items-center justify-between group cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-9 h-9 rounded-full bg-[#1E1E22] flex items-center justify-center ring-1 ring-white/10 group-hover:ring-blue-500/50 transition-all">
<div
class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-[8px] text-white font-semibold">
Ξ
</div>
</div>
<div>
<h3 class="text-sm font-medium text-white">
Ethereum
</h3>
<p class="text-[10px] text-gray-500">ETH</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-medium text-white">
$2,850.10
</p>
<p class="text-[10px] text-red-400">-0.8%</p>
</div>
</div>
<!-- Asset 3 -->
<div class="flex items-center justify-between group cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-9 h-9 rounded-full bg-[#1E1E22] flex items-center justify-center ring-1 ring-white/10 group-hover:ring-purple-500/50 transition-all">
<div
class="w-5 h-5 rounded-full bg-purple-500 flex items-center justify-center text-[8px] text-white font-semibold">
S
</div>
</div>
<div>
<h3 class="text-sm font-medium text-white">
Solana
</h3>
<p class="text-[10px] text-gray-500">SOL</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-medium text-white">
$108.40
</p>
<p class="text-[10px] text-green-400">+5.2%</p>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="w-full z-20 pt-0 px-6 pb-6 absolute bottom-0">
<div
class="absolute inset-0 bg-gradient-to-t from-[#050505] via-[#050505]/95 to-transparent pointer-events-none">
</div>
<div class="relative flex justify-between items-end">
<button class="flex flex-col items-center gap-1.5 -mb-2 text-white">
<div class="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center shadow-[0_0_20px_rgba(37,99,235,0.4)] border border-white/10 ring-4 ring-[#050505] transform -translate-y-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
<polyline points="9 22 9 12 15 12 15 22" class=""></polyline>
</svg>
</div>
<span class="text-[10px] font-semibold tracking-wide">
Home
</span>
</button>
<button class="flex flex-col items-center gap-1.5 pb-1 text-gray-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
</svg>
<span class="text-[10px] font-medium">Wallet</span>
</button>
<button class="flex flex-col items-center gap-1.5 pb-1 text-gray-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<line x1="12" x2="12" y1="20" y2="10" class=""></line>
<line x1="18" x2="18" y1="20" y2="4" class=""></line>
<line x1="6" x2="6" y1="20" y2="16" class=""></line>
</svg>
<span class="text-[10px] font-medium">Activity</span>
</button>
<button class="flex flex-col items-center gap-1.5 pb-1 text-gray-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<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-.09a2 2 0 0 1-1-1.74v-.47a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.35a2 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" class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
<span class="text-[10px] font-medium">Settings</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Text Content (Right) -->
<div class="flex flex-col md:flex-row md:items-end w-full gap-x-8 gap-y-8 justify-between">
<div class="flex flex-col gap-6 max-w-3xl">
<div class="flex gap-3 gap-x-3 gap-y-3 items-center scroll-item scroll-fade-up"
style="animation-play-state: running;">
<span class="flex items-center justify-center text-[11px] font-medium text-blue-400 font-mono bg-blue-500/10 w-7 h-7 border-blue-500/20 border rounded-lg shadow-[0_0_10px_rgba(59,130,246,0.2)]">
02
</span>
<span class="uppercase text-sm font-medium text-gray-500 tracking-widest font-sans" style="">
Mobile App
</span>
</div>
<h2
class="md:text-5xl lg:text-6xl leading-[1.1] text-4xl text-white font-oswald font-light tracking-tight scroll-item scroll-fade-up delay-100"
style="animation-play-state: running;">
Built for speed.
<span class="text-gray-600 font-oswald font-light tracking-tight" style="">
Designed for trust.
</span>
</h2>
<p class="leading-relaxed text-lg font-light text-gray-400 text-left mt-2 scroll-item scroll-fade-up delay-200"
style="animation-play-state: running;">
Manage your wealth on the go. Real-time syncing, instant
transfers, and institutional-grade security in your pocket.
</p>
</div>
<button class="group flex items-center gap-2 pl-6 pr-5 py-3 bg-white text-black rounded-full text-sm font-medium hover:bg-gray-200 transition-all duration-200 font-sans whitespace-nowrap">
<span class="font-sans" style="">Explore Features</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4 transition-transform group-hover:translate-x-1">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
</div>
</div>