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.
26
Components
84
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.