Transform your social feed with a cyberpunk neon aesthetic—integrated engagement rail and dynamic share sheet spark user interaction.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-grid-overlay" aria-hidden="true"></div>
6 <div class="gs-card">
7 <div class="gs-card-inner">
8 <header class="gs-card-header d-flex align-items-center">
9 <svg xmlns="http://www.w3.org/2000/svg" class="avatar" fill="none"><circle></circle><path d="M14.31 8a3 3 0 0 1 0 0L15 22"></path><path d="M17.09 13l-.6-1.2M10.6 3.5A8.997 8.997 0 0 0 3 18c0 4.418 3.134 7 7 7s6-3 6-3"></path></svg>
10 <div class="user-info">
11 <strong>Jane Doe</strong>
12 <small>2 hours ago</small>
13 </div>
14 </header>
15 <p class="gs-card-content">
16 Just posted a new photo from my recent adventure through the neon-lit streets of Tokyo. #cyberpunk #travel
17 </p>
18 <div class="gs-engagement-rail">
19 <button type="button" class="btn-like" title="Like">
20 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
21 </button>
22 <button type="button" class="btn-comment" title="Comment">
23 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M21 11.5A8.5 8.5 0 0 0 12.5 3h-.16A8.5 8.5 0 0 0 3 11.5c0 5.25 5 9.86 8.09 11.29a.89.89 0 0 0 .72 0C16.49 21.36 21 16.75 21 11.5z"></path></svg>
24 </button>
25 <button type="button" class="btn-share" title="Share">
26 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><circle></circle><circle></circle><circle></circle><path d="M8.59 12.51l6.33-3.66M8.59 11.51l6.33 3.67"></path></svg>
27 </button>
28 </div>
29 </div>
30 </div>
31</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.
27
Components
415
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Explore a data dashboard that combines retro synthwave aesthetics with fluid animations to create an immersive user experience.
Discover an interactive data insights dashboard with frosted glass design and vibrant animations that elevate your data visualization experience.
Elevate form UX with a retro synthwave style, floating labels, and smart inline validation in a stunning deep space theme.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.