Transform your workflow with a vibrant Kanban board featuring draggable frosted glass cards, layered over a captivating synthwave backdrop.
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-container">
6 <div class="gs-card">
7 <header class="gs-card-header">
8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="gs-icon">
9 <path d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2zm0-1a7 7 0 1 1 0 14A7 7 0 0 1 8 1z"></path>
10 </svg>
11 <span class="gs-card-title">To Do</span>
12 </header>
13 <ul class="gs-card-list">
14 <li class="gs-card-item">Task 1 - Design Wireframes</li>
15 <li class="gs-card-item">Task 2 - Develop Frontend</li>
16 <li class="gs-card-item">Task 3 - Conduct Testing</li>
17 </ul>
18 </div>
19 <div class="gs-card">
20 <header class="gs-card-header">
21 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="gs-icon">
22 <path d="M8 10a6 6 0 1 0 0-12A6 6 0 0 0 8 10zm0 1a7 7 0 1 1 0-14A7 7 0 0 1 8 11z"></path>
23 </svg>
24 <span class="gs-card-title">In Progress</span>
25 </header>
26 <ul class="gs-card-list">
27 <li class="gs-card-item">Task 4 - Debugging</li>
28 <li class="gs-card-item">Task 5 - Testing</li>
29 </ul>
30 </div>
31 <div class="gs-card">
32 <header class="gs-card-header">
33 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="gs-icon">
34 <path d="M5 16a7 7 0 1 0 7-7A7 7 0 0 0 5 16zm-1 1A8 8 0 1 1 13 16a8 8 0 0 1-9 1z"></path>
35 </svg>
36 <span class="gs-card-title">Completed</span>
37 </header>
38 <ul class="gs-card-list">
39 <li class="gs-card-item">Task 6 - Deployment</li>
40 </ul>
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
93
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.