All Prompts
All Prompts
credit cardglassmorphismtailwindanimatedhovergradientresponsiveshowcase
Animated Stacked Glassmorphic Credit Card Showcase
Анимированная стеклянная витрина кредитных карт. Glassmorphism, Tailwind CSS. Идеально для финтех-баннеров, цен или превью платежей.
Prompt
<section class="sm:px-8 sm:mt-32 [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] max-w-7xl mt-32 mr-auto ml-auto px-8">
<div class="relative">
<div class="sm:p-6 border rounded-2xl ring-1 pt-4 pr-4 pb-4 pl-4 backdrop-blur-md bg-neutral-950/80 border-white/10 ring-white/5" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent);">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Sidebar -->
<aside class="lg:col-span-3">
<div class="h-full rounded-xl border p-4 sm:p-5 ring-1 border-white/10 bg-neutral-900/90 ring-white/5">
<div class="flex items-center justify-between">
<div class="inline-flex items-center gap-2 text-sm font-semibold tracking-tight font-geist text-white">
<span class="text-sm font-semibold tracking-tight font-geist text-white">Moneo</span>
</div>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
</span>
</div>
<div class="mt-5">
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="m21 21-4.3-4.3" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
<input class="w-full rounded-xl ring-1 pl-9 pr-3 py-2.5 text-sm placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-emerald-400/40 bg-neutral-800/50 ring-white/10 text-white" placeholder="Search anything…">
</div>
</div>
<div class="mt-6">
<p class="text-xs text-neutral-500 mb-3 uppercase tracking-wide font-geist">Navigation</p>
<nav class="space-y-3">
<a class="flex items-center justify-between rounded-xl bg-white/[0.06] ring-1 px-3 py-3 text-sm ring-white/10 text-white" href="#">
<span class="inline-flex items-center gap-3 font-geist">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/10 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="14" width="7" height="7" rx="1" class=""></rect><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect></svg>
</span>
Overview
</span>
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
</a>
<a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 1-12 0" class=""></path><path d="M6 8V5a6 6 0 1 1 12 0v3" class=""></path><path d="M12 19h.01" class=""></path></svg>
</span>
Notifications
</a>
<a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12A9 9 0 1 1 12 3" class=""></path><path d="M3.6 15h10.8" class=""></path><path d="M3.6 11H21" class=""></path></svg>
</span>
AI Insights
</a>
<a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6H6" class=""></path><path d="M6 12h12" class=""></path><path d="M6 18h12" class=""></path></svg>
</span>
Activity
</a>
<a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
</span>
Cards
</a>
</nav>
</div>
<div class="mt-8">
<p class="text-xs text-neutral-500 mb-3 uppercase tracking-wide font-geist">AI Assistant</p>
<div class="rounded-xl bg-white/[0.06] ring-1 p-3 flex items-center gap-3 ring-white/10">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/15 ring-1 text-emerald-300 ring-emerald-400/30">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path></svg>
</span>
<div class="text-sm">
<p class="tracking-tight font-medium font-geist text-white">Smart Budget</p>
<p class="text-xs font-geist text-neutral-400">AI-powered tracking</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main -->
<main class="lg:col-span-9 space-y-6">
<!-- Tabs / user -->
<div class="flex items-center justify-between overflow-x-auto">
<div class="flex gap-2 flex-nowrap pb-2 pr-3">
<button class="px-4 py-2 rounded-full bg-emerald-500/15 text-sm ring-1 tracking-tight font-geist whitespace-nowrap text-emerald-300 ring-emerald-400/30">Overview</button>
<button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Wallet</button>
<button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Transfers</button>
<button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Reports</button>
<button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Team</button>
<button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Settings</button>
</div>
<div class="flex gap-3 items-center shrink-0 ml-3">
<img class="w-9 h-9 object-cover ring-1 rounded-full ring-white/15" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="User">
</div>
</div>
<!-- Earnings + Card -->
<div class="grid grid-cols-1 gap-6 items-stretch lg:[grid-template-columns:minmax(0,_420px)_minmax(0,_1fr)]">
<!-- Chart -->
<div class="flex flex-col w-full h-full max-w-lg rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="flex items-start justify-between">
<div class="">
<div class="flex items-baseline gap-2">
<p class="text-3xl font-geist font-light tracking-tight text-white" style="">$742,560</p>
<span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+2.1%</span>
</div>
<p class="mt-1 text-xs font-geist text-neutral-400">Net inflow · last 7 days</p>
</div>
</div>
<div class="mt-6 grow">
<div class="relative h-48 sm:h-56 md:h-64">
<canvas id="nexa-earnings" class="w-full h-full" width="756" height="512" style="display: block; box-sizing: border-box; height: 256px; width: 378px;"></canvas>
</div>
</div>
</div>
<!-- Card -->
<div class="h-full flex flex-col w-full rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="rounded-2xl p-5 ring-1 ring-white/10" style="background: radial-gradient(120% 120% at 20% 0%, rgba(240,240,240,0.12) 0%, rgba(163,163,163,0.06) 35%, rgba(20,20,20,0.45) 70%), linear-gradient(135deg, rgba(115,115,115,0.15), rgba(163,163,163,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);">
<div class="flex items-center justify-between">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 11V7a2 2 0 0 1 2-2h12" class=""></path>
<path d="M20 13v4a2 2 0 0 1-2 2H6" class=""></path>
<path d="M15 7h.01" class=""></path>
</svg>
</div>
<div class="mt-6">
<div class="inline-flex items-center gap-2 text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3" class=""></circle>
<path d="M2 12a10 10 0 0 1 20 0" class=""></path>
</svg>
<p class="text-lg sm:text-xl font-semibold tracking-tight font-geist text-white">5312 9087 4421 1160</p>
</div>
<div class="mt-6 grid grid-cols-2 gap-4 text-white/90">
<div>
<p class="text-[11px] font-geist text-neutral-400">Valid Thru</p>
<p class="text-sm tracking-tight font-geist">09/30</p>
</div>
<div class="text-right">
<p class="text-[11px] font-geist text-neutral-400">CVC</p>
<p class="text-sm tracking-tight font-geist">• • • •</p>
</div>
</div>
</div>
</div>
<div class="mt-5 grid grid-cols-4 gap-3">
<div class="flex flex-col items-center gap-2">
<span class="h-12 w-12 inline-flex items-center justify-center rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m7 10 5 5 5-5" class=""></path></svg>
</span>
<span class="text-xs font-geist text-neutral-400">Pay</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m17 14-5-5-5 5" class=""></path></svg>
</span>
<span class="text-xs font-geist text-neutral-400">Request</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect x="3" y="8" width="18" height="12" rx="2" class=""></rect></svg>
</span>
<span class="text-xs font-geist text-neutral-400">Invoice</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="14" width="7" height="7" rx="1" class=""></rect><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect></svg>
</span>
<span class="text-xs font-geist text-neutral-400">Tools</span>
</div>
</div>
</div>
</div>
<!-- KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="flex items-center justify-between">
<p class="text-sm font-geist text-neutral-400">Revenue</p>
</div>
<div class="mt-3 flex items-baseline class= font-geist" text-3xl="" sm:text-xl="" font-semibold="" text-white="" tracking-tight"="">$31,240.12<p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white"></p>
<span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+4.2%</span>
</div>
<p class="mt-1 text-xs text-neutral-500 font-geist">vs. previous week</p>
</div>
<div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="flex items-center justify-between">
<p class="text-sm font-geist text-neutral-400">Operating Costs</p>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18" class=""></path><path d="M18 6 6 18" class=""></path></svg>
</span>
</div>
<div class="mt-3 flex items-baseline gap-2">
<p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$4,860.00</p>
<span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">-1.3%</span>
</div>
<p class="mt-1 text-xs text-neutral-500 font-geist">vs. previous week</p>
</div>
<div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="flex items-center justify-between">
<p class="text-sm font-geist text-neutral-400">Burn Rate</p>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 6v6l4 2" class=""></path></svg>
</span>
</div>
<div class="mt-3 flex items-baseline gap-2">
<p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$2,140.00</p>
<span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">-0.9%</span>
</div>
<p class="mt-1 text-xs text-neutral-500 font-geist">rolling 30 days</p>
</div>
<div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
<div class="flex items-center justify-between">
<p class="text-sm font-geist text-neutral-400">Cash Reserve</p>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
</span>
</div>
<div class="mt-3 flex items-baseline gap-2">
<p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$3,980.55</p>
<span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+1.7%</span>
</div>
<p class="mt-1 text-xs text-neutral-500 font-geist">month to date</p>
</div>
</div>
</main>
</div>
</div>
</div>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" class=""></script>
<script class="">
(function () {
const el = document.getElementById('nexa-earnings');
if (!el) return;
if (window.Chart) {
const existing = Chart.getChart(el);
if (existing) existing.destroy();
}
const ctx = el.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, el.height || 240);
gradient.addColorStop(0, 'rgba(16, 185, 129, 0.45)');
gradient.addColorStop(1, 'rgba(16, 185, 129, 0.06)');
const grid = 'rgba(255,255,255,0.06)';
const label = 'rgba(255,255,255,0.65)';
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Net inflow',
data: [8, 19, 14, 27, 35, 22, 18],
backgroundColor: gradient,
borderColor: '#10b981',
borderWidth: 1,
borderRadius: 8,
barPercentage: 0.6,
categoryPercentage: 0.7
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
titleColor: '#fff',
bodyColor: '#e5e7eb',
displayColors: false,
padding: 10
}
},
scales: {
x: { grid: { color: grid, drawBorder: false }, ticks: { color: label, font: { size: 11 } } },
y: { grid: { color: grid, drawBorder: false }, ticks: { color: label, callback: v => '$' + v + 'k', maxTicksLimit: 5 } }
}
}
});
})();
</script>
</section>