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.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.
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.
561
Snippets
2630.3k
Views
86.3k
Downloads
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.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.