macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
1<section class="term-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="term-orb orb-a"></span>
3 <span class="term-orb orb-b"></span>
4
5 <div class="relative w-full max-w-2xl">
6 <div class="term-card rounded-2xl overflow-hidden">
7 <div class="term-chrome flex items-center justify-between px-4 py-2.5">
8 <span class="flex items-center gap-1.5">
9 <span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span>
10 <span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e]"></span>
11 <span class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>
12 </span>
13 <span class="text-slate-400 text-[11px] font-mono">~ / atlas / web</span>
14 <span class="w-12"></span>
15 </div>
16 <div class="term-body p-5 font-mono text-[13.5px] leading-relaxed">
17 <p class="term-line"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-1">npm</span><span class="term-cursor term-c-1">▌</span></p>
18 <p class="term-line term-line-2"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-2">npm <span class="term-cmd">install</span> @atlas/core</span><span class="term-cursor term-c-2">▌</span></p>
19 <p class="term-line term-line-3"><span class="term-out">added 142 packages in 2.3s · <span class="term-ok">✓ ok</span></span></p>
20 <p class="term-line term-line-4"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-3">atlas <span class="term-cmd">build</span> --prod</span><span class="term-cursor term-c-3">▌</span></p>
21 <p class="term-line term-line-5"><span class="term-out">→ analyzing <span class="term-ok">✓</span></span></p>
22 <p class="term-line term-line-6"><span class="term-out">→ bundling <span class="term-ok">✓</span></span></p>
23 <p class="term-line term-line-7"><span class="term-out">→ optimizing <span class="term-ok">✓</span></span></p>
24 <p class="term-line term-line-8"><span class="term-out term-success">✨ build complete · </span><span class="term-out">28.4kb gzipped</span></p>
25 <p class="term-line term-line-9"><span class="term-prompt">~ $</span> <span class="term-cursor term-c-final">▌</span></p>
26 </div>
27 </div>
28
29 <p class="text-center text-[12px] mt-5 text-slate-400">↑ a five-second auto-playing demo</p>
30 </div>
31</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.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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.
Animated theme switch with morphing sun → moon icon and a full-page palette transition. Click anywhere on the switch to toggle the demo card's vibe.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
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.
579
Snippets
2630.9k
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.