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>Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
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.
546
Snippets
2629.8k
Views
86.3k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.