Premium hero component with layered gradients, polished spacing, responsive composition, and production-ready Tailwind styling.
1<section class="b1s1-stage min-h-screen px-4 sm:px-8 py-14 sm:py-16 relative overflow-hidden flex items-center">
2 <span class="b1s1-orb b1s1-orb-a"></span>
3 <span class="b1s1-orb b1s1-orb-b"></span>
4 <span class="b1s1-mesh"></span>
5
6 <div class="relative w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-stretch">
7 <div class="lg:col-span-7 b1s1-panel rounded-3xl p-6 sm:p-8">
8 <span class="b1s1-pill inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5">
9 <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>HERO
10 </span>
11 <h2 class="text-white font-bold leading-tight tracking-tight mb-3" style="font-size:clamp(1.6rem,4vw,2.8rem)">
12 Nebula Hero for AI Studio
13 </h2>
14 <p class="text-slate-300/80 text-sm sm:text-base leading-relaxed max-w-2xl mb-7">Build polished interfaces faster. Launch premium pages in hours.</p>
15 <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
16 <article class="b1s1-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Velocity</p><p class="text-white font-black text-2xl">73%</p><p class="text-emerald-300/80 text-[11px] mt-1">+4.2%</p></article>
17 <article class="b1s1-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Satisfaction</p><p class="text-white font-black text-2xl">81%</p><p class="text-cyan-300/80 text-[11px] mt-1">NPS +18</p></article>
18 <article class="b1s1-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Reliability</p><p class="text-white font-black text-2xl">99.1%</p><p class="text-fuchsia-300/80 text-[11px] mt-1">SLA protected</p></article>
19 </div>
20 <div class="mt-7 flex flex-wrap gap-3">
21 <a href="#" class="b1s1-cta inline-flex items-center gap-2 rounded-2xl px-5 py-3 text-[13.5px] font-semibold text-white">Explore component</a>
22 <a href="#" class="b1s1-ghost inline-flex items-center gap-2 rounded-2xl px-5 py-3 text-[13.5px] font-semibold text-white">View docs</a>
23 </div>
24 </div>
25
26 <aside class="lg:col-span-5 b1s1-side rounded-3xl p-5 sm:p-6">
27 <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-400 mb-3">Live preview</p>
28 <div class="b1s1-preview rounded-2xl p-4 sm:p-5">
29 <div class="flex items-center justify-between mb-4">
30 <p class="text-white font-semibold text-sm">hero module</p>
31 <span class="text-[10px] px-2 py-0.5 rounded-full b1s1-dot">active</span>
32 </div>
33 <div class="space-y-2.5">
34 <div class="b1s1-line" style="width:88%"></div>
35 <div class="b1s1-line" style="width:72%"></div>
36 <div class="b1s1-line" style="width:94%"></div>
37 <div class="b1s1-line" style="width:66%"></div>
38 </div>
39 </div>
40 </aside>
41 </div>
42</section>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.
Premium glass component with layered gradients, polished spacing, responsive composition, and production-ready Tailwind styling.
Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.
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.
596
Snippets
2632.1k
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.