Explorer
project
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50/40 font-sans text-slate-900 antialiased p-8 flex items-center justify-center">
<div class="max-w-md w-full bg-white ring-1 ring-slate-200 rounded-2xl overflow-hidden shadow-2xl shadow-slate-900/10 group">
<div class="relative h-48 bg-gradient-to-br from-indigo-600 to-violet-700 overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.3),transparent)]"></div>
<div class="absolute top-4 right-4 px-2.5 py-1 rounded-full bg-white/20 backdrop-blur text-white text-xs font-medium ring-1 ring-white/30">Pro</div>
</div>
<div class="p-6 -mt-12 relative">
<div class="h-16 w-16 rounded-2xl bg-white ring-4 ring-white shadow-lg flex items-center justify-center text-2xl">⚡</div>
<h3 class="mt-4 text-xl font-semibold tracking-tight">Realtime Analytics</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">Stream insights from every touchpoint with sub-second latency.</p>
<div class="mt-5 flex items-center justify-between pt-5 border-t border-slate-100">
<span class="text-2xl font-bold">$29<span class="text-sm font-medium text-slate-500">/mo</span></span>
<button class="px-3 py-1.5 rounded-lg bg-slate-900 text-white text-xs font-medium hover:bg-slate-800 transition">Subscribe</button>
</div>
</div>
</div>
</div>
rloop.dev/p/Pr-Q47