Explore a futuristic social feed card featuring animated neon glow actions for likes, shares, and comments, set against a mesmerizing cyberpunk backdrop.
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-grid-overlay" aria-hidden="true"></div>
5 <div class="gs-card">
6 <div class="gs-card-inner">
7 <header class="gs-header d-flex align-items-center mb-4">
8 <svg width="40" height="40" fill="none" class="me-3">
9 <circle></circle>
10 <path d="M8 12h8M12 8v8"></path>
11 </svg>
12 <div>
13 <h4 class="m-0">Alex Cyber</h4>
14 <small>2 hours ago</small>
15 </div>
16 </header>
17 <p class="gs-content mb-4">
18 Experience the vibrant glow of tech. Here's a sneak peek into the future of digital spaces and social interactions with neon reverberations.
19 </p>
20 <div class="gs-actions d-flex align-items-center justify-content-around">
21 <button class="gs-btn" aria-label="Like">
22 <svg width="24" height="24" fill="none">
23 <path d="M20.8 4a5.1 5.1 0 0 1 0 7.3l-8.8 8.5-8.9-8.4a5 5 0 1 1 7.2-7l.6.6.6-.6a5.1 5.1 0 0 1 7.3-.1z"></path>
24 </svg>
25 </button>
26 <button class="gs-btn" aria-label="Comment">
27 <svg width="24" height="24" fill="none">
28 <path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"></path>
29 </svg>
30 </button>
31 <button class="gs-btn" aria-label="Share">
32 <svg width="24" height="24" fill="none">
33 <path d="M4 12V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8"></path>
34 <polyline></polyline>
35 </svg>
36 </button>
37 </div>
38 </div>
39 </div>
40</section>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.