Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.
1<section class="cyber-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
2 <span class="cyber-grid"></span>
3 <span class="cyber-scanline"></span>
4 <span class="cyber-geom cyber-geom-a"></span>
5 <span class="cyber-geom cyber-geom-b"></span>
6
7 <div class="relative z-10 text-center max-w-3xl">
8 <span class="cyber-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-7">
9 <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>
10 v2.0 · now in beta
11 </span>
12 <h1 class="font-black text-white leading-[1.05] tracking-tight mb-5" style="font-size:clamp(2.5rem,7vw,5rem)">
13 Build the future,
14 <span class="cyber-glitch" data-text="faster.">faster.</span>
15 </h1>
16 <p class="text-base sm:text-lg leading-relaxed mb-8 max-w-xl mx-auto text-slate-300/80">
17 A no-nonsense developer toolkit for shipping production-ready interfaces at the speed of thought.
18 </p>
19 <div class="flex flex-wrap items-center justify-center gap-3">
20 <a href="#" class="cyber-primary inline-flex items-center gap-2 px-7 py-3.5 rounded-xl font-semibold text-[14px] text-black">
21 Start free
22 <svg class="w-4 h-4" 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>
23 </a>
24 <a href="#" class="cyber-ghost inline-flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold text-[14px] text-white">See docs</a>
25 </div>
26 </div>
27</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.
Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
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.
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
Trending now
Trending Bootstrap snippets from the classic library.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.