Modern asymmetric bento grid with iridescent shimmer that sweeps across each card on hover. Six tiles, four sizes, all responsive.
1<section class="holo-stage min-h-screen px-4 sm:px-6 py-12 sm:py-16 flex items-center">
2 <div class="relative w-full max-w-6xl mx-auto">
3 <header class="text-center mb-10">
4 <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 holo-pill">Why teams pick us</span>
5 <h2 class="font-bold text-white leading-tight tracking-tight" style="font-size:clamp(1.75rem,4vw,2.75rem)">Everything you need. Nothing you don't.</h2>
6 </header>
7 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[140px] gap-4">
8 <div class="holo-tile lg:col-span-2 lg:row-span-2 p-6 flex flex-col justify-between">
9 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></span>
10 <div>
11 <h3 class="text-white font-bold text-xl mb-1.5">Ship at light speed</h3>
12 <p class="text-slate-300/75 text-sm leading-relaxed">Pre-wired stacks, real-time previews, instant deploys. Less plumbing, more shipping.</p>
13 </div>
14 </div>
15 <div class="holo-tile p-5 flex flex-col justify-between">
16 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-7a2 2 0 00-2-2H6a2 2 0 00-2 2v7a2 2 0 002 2zm10-12V7a4 4 0 00-8 0v4h8z"></path></svg></span>
17 <h3 class="text-white font-semibold">Bank-grade security</h3>
18 </div>
19 <div class="holo-tile p-5 flex flex-col justify-between">
20 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg></span>
21 <h3 class="text-white font-semibold">Self-hostable</h3>
22 </div>
23 <div class="holo-tile lg:col-span-2 p-5 flex items-center justify-between">
24 <div><h3 class="text-white font-semibold text-lg">200+ components, MIT-licensed</h3><p class="text-slate-300/70 text-[12.5px] mt-1">Copy, fork, ship — your audit trail stays clean.</p></div>
25 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg></span>
26 </div>
27 <div class="holo-tile p-5 flex flex-col justify-between">
28 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg></span>
29 <h3 class="text-white font-semibold">Multi-tenant</h3>
30 </div>
31 <div class="holo-tile p-5 flex flex-col justify-between">
32 <span class="holo-icon"><svg fill="none" stroke="currentColor" stroke-width="1.6"><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></span>
33 <h3 class="text-white font-semibold">Live analytics</h3>
34 </div>
35 </div>
36 </div>
37</section>
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
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.