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>Compact music player with album art, animated equaliser bars, scrubber, elapsed/remaining time and play controls. Pure CSS keyframes drive the EQ pulse and the neon ring around the album art.
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.
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.
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.