HTML
Tailwind Gradient Glass Card
Drop this into any Tailwind project to get an instant “premium SaaS” card for features, stats or testimonials. It is designed to sit nicely on dark dashboards.
Usage notes
Use this for feature callouts, pricing highlights or quick stats on your landing page.
You can tweak the gradient colours to align with your brand tokens.
Copy this snippet into your project
Use the full version for learning, or copy it without comments when you just want the bare code.
<div class="relative overflow-hidden rounded-2xl border border-slate-800/80 bg-slate-950/80 p-4 shadow-lg shadow-black/40">
<div class="pointer-events-none absolute inset-px rounded-[1.05rem] bg-gradient-to-br from-sky-500/10 via-transparent to-emerald-500/10"></div>
<div class="relative space-y-2">
<p class="text-xs uppercase tracking-wide text-slate-500">Stat</p>
<p class="text-2xl font-semibold text-white">99.9% uptime</p>
<p class="text-xs text-slate-400">Backed by monitoring and proper logging, not vibes.</p>
</div>
</div>
Tags
#tailwind
#card
#ui
#glassmorphism