Explore a data dashboard that combines retro synthwave aesthetics with fluid animations to create an immersive user experience.
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="d-flex justify-content-between align-items-center">
8 <h2 class="gs-dashboard-title">Project Dashboard</h2>
9 <button type="button" class="btn btn-sm btn-outline-light">Refresh</button>
10 </header>
11 <div class="gs-kpi">
12 <div class="kpi-item">
13 <h4>Revenue</h4>
14 <div class="kpi-value">$15,200</div>
15 <svg class="sparkline" width="100" height="30">
16 <polyline></polyline>
17 </svg>
18 </div>
19 <div class="kpi-item">
20 <h4>New Users</h4>
21 <div class="kpi-value">325</div>
22 <svg class="sparkline" width="100" height="30">
23 <polyline></polyline>
24 </svg>
25 </div>
26 </div>
27 <footer class="activity-feed">
28 <div class="activity-item">
29 <svg xmlns="http://www.w3.org/2000/svg" fill="none">
30 <path stroke-width="2" d="M13 8V6a1 1 0 10-2 0v2m-1 5H7m1 0h.01M5 10a1 1 0 010-2h1.5a.5.5 0 01.49.602L5 13.5a.5.5 0 01-.49-.602"></path>
31 </svg>
32 <div>User <strong>Sarah</strong> joined the project dashboard.</div>
33 </div>
34 <div class="activity-item">
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none">
36 <path stroke-width="2" d="M13 16h-1v-1H8v6h6v-5.51m1 0H9m2-6L9 6l4.58-4.58"></path>
37 </svg>
38 <div>Server maintenance completed successfully.</div>
39 </div>
40 </footer>
41 </div>
42 </div>
43</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
169
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.