Experience a captivating social feed card with a modern bento-grid layout, interactive elements, and animated share options for increased engagement.
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-card">
6 <div class="gs-card-inner">
7 <div class="gs-content">
8 <header class="gs-header">
9 <div class="user-info">
10 <svg width="24" height="24" fill="none">
11 <circle></circle>
12 <path d="M12 6v6h4" stroke="var(--text)" stroke-width="2"></path>
13 </svg>
14 <h2 class="user-name">Alex Johnson</h2>
15 <span class="post-date">July 15, 2025</span>
16 </div>
17 </header>
18 <main class="gs-main">
19 <p>"Diving into the ocean's depths is like exploring a new world. The tranquility and beauty are unmatched. 🌊 #oceanlove"</p>
20 <div class="engagement-rail">
21 <button aria-label="Like" class="like-btn">👍 248</button>
22 <button aria-label="Comment" class="comment-btn">💬 34</button>
23 <button aria-label="Share" class="share-btn">↗️ Share</button>
24 </div>
25 </main>
26 </div>
27 </div>
28 </div>
29</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
45
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.