HTML Free

Tailwind Gradient Glass Card

A more polished 1-Byte-style card for modern SaaS and dashboard UIs. Uses layered gradients, subtle blur and a premium dark treatment without becoming visually noisy.

1 min read 26 lines Beginner Updated: March 2026

Use case

UI building block

Best for

Feature grids, metrics, premium cards

Drop-in level

Drop in and recolour

Stack / dependencies

Tailwind CSS

Compatibility

Tailwind 3+ Dark UI layouts

Code snippet

Full version with formatting intact. Use “Copy stripped version” when you want a leaner base.

<div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 p-5 shadow-[0_20px_60px_rgba(2,6,23,0.45)] backdrop-blur transition duration-300 hover:-translate-y-1 hover:border-sky-400/25">
  <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(58,140,255,0.18),transparent_32%),radial-gradient(circle_at_bottom_right,rgba(34,197,94,0.10),transparent_30%)]"></div>
  <div class="pointer-events-none absolute inset-px rounded-[1.35rem] border border-white/5"></div>

  <div class="relative">
    <div class="flex items-start justify-between gap-4">
      <div>
        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Uptime</p>
        <h3 class="mt-3 text-3xl font-semibold tracking-tight text-white">99.98%</h3>
      </div>
      <span class="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-[11px] font-semibold text-emerald-300">
        Live
      </span>
    </div>

    <p class="mt-4 max-w-xs text-sm leading-7 text-slate-400">
      Built for dashboards, premium landing sections and compact intelligence cards that still feel lightweight.
    </p>

    <div class="mt-5 flex items-center gap-2 text-xs text-slate-500">
      <span class="rounded-full border border-white/10 bg-slate-900/80 px-2.5 py-1">Tailwind</span>
      <span class="rounded-full border border-white/10 bg-slate-900/80 px-2.5 py-1">Dark UI</span>
      <span class="rounded-full border border-white/10 bg-slate-900/80 px-2.5 py-1">SaaS</span>
    </div>
  </div>
</div>

Related snippets

View all

PHP Free

Secure PHP Contact Form Handler

A more real-world contact form endpoint for bespoke PHP builds. Includes request method enforcement, CSRF validation, anti-bot checks, sane input validation, response helpers and a clean place to wire PHPMailer or your preferred provider.

PHP Free

PDO Bootstrap (db.php pattern)

A stronger db bootstrap for bespoke PHP apps. Uses static reuse, utf8mb4, disabled emulated prepares, clear exception handling and small helper structure that fits shared hosting as well as more advanced setups.

PHP Free

PHP Login Rate Limiter (Session Based)

A slightly more production-shaped login limiter that blocks repeated attempts over a lock window, returns consistent responses and gives you a cleaner place to evolve later into database or IP-backed rate limiting.

← Back to all snippets

Stack / dependencies

Compatibility

Code snippet

Tags

Related snippets

Secure PHP Contact Form Handler

PDO Bootstrap (db.php pattern)

PHP Login Rate Limiter (Session Based)

Cookie preferences