Three product-card teasers with a CSS-only perspective-tilt on hover. Inner contents slide forward with parallax, glow rims activate, all in 320ms.
1<section class="tilt-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="tilt-orb orb-a"></span>
3 <span class="tilt-orb orb-b"></span>
4
5 <div class="relative w-full max-w-5xl">
6 <header class="text-center mb-10">
7 <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 tilt-pill">What's new</span>
8 <h2 class="text-white font-bold leading-tight tracking-tight" style="font-size:clamp(1.75rem,4vw,2.5rem)">Designed for hover.</h2>
9 <p class="text-slate-300/70 max-w-md mx-auto mt-2 text-sm">Mouse over a card — the perspective tilt, glow rim and parallax inner layer are pure CSS.</p>
10 </header>
11
12 <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
13 <a href="#" class="tilt-card group">
14 <div class="tilt-card-inner">
15 <span class="tilt-card-glow"></span>
16 <span class="tilt-card-icon" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)">
17 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
18 </span>
19 <h3 class="text-white font-bold text-lg mt-4 mb-1">Edge runtime</h3>
20 <p class="text-slate-300/75 text-[12.5px] leading-relaxed">Deploy to 90+ PoPs. Cold starts < 20ms, global cache invalidation in seconds.</p>
21 <span class="tilt-card-cta text-[12px] font-semibold mt-4 inline-flex items-center gap-1">Learn more <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></span>
22 </div>
23 </a>
24 <a href="#" class="tilt-card group">
25 <div class="tilt-card-inner">
26 <span class="tilt-card-glow" style="background:radial-gradient(circle at 50% 0%,rgba(168,85,247,0.50),transparent 70%)"></span>
27 <span class="tilt-card-icon" style="background:linear-gradient(135deg,#a855f7,#6366f1)">
28 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
29 </span>
30 <h3 class="text-white font-bold text-lg mt-4 mb-1">SOC 2 + GDPR</h3>
31 <p class="text-slate-300/75 text-[12.5px] leading-relaxed">Audit logs on by default. Granular RBAC, encrypted secrets, region-locked storage.</p>
32 <span class="tilt-card-cta text-[12px] font-semibold mt-4 inline-flex items-center gap-1">Learn more <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></span>
33 </div>
34 </a>
35 <a href="#" class="tilt-card group">
36 <div class="tilt-card-inner">
37 <span class="tilt-card-glow" style="background:radial-gradient(circle at 50% 0%,rgba(244,114,182,0.50),transparent 70%)"></span>
38 <span class="tilt-card-icon" style="background:linear-gradient(135deg,#f472b6,#a855f7)">
39 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
40 </span>
41 <h3 class="text-white font-bold text-lg mt-4 mb-1">Live analytics</h3>
42 <p class="text-slate-300/75 text-[12.5px] leading-relaxed">Real-user data streamed live. P95 latency, error rate, and conversion in one panel.</p>
43 <span class="tilt-card-cta text-[12px] font-semibold mt-4 inline-flex items-center gap-1">Learn more <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></span>
44 </div>
45 </a>
46 </div>
47 </div>
48</section>Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.