Cards Bootstrap 5Free+ CSS
Explore our playful pricing plans with a stunning claymorphic design and interactive trust signals, all within a vibrant retro synthwave theme.
0 views0 downloads
gosnippets.com/preview/retro-synthwave-pricing-selector-with-trust-badges
Source Code
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 text-center">
7 <h2 class="mb-3">Choose Your Plan</h2>
8 <div class="d-flex justify-content-center mb-4">
9 <div class="gs-plan card mx-2">
10 <h3>Basic Plan</h3>
11 <p class="price">$9.99/mo</p>
12 <ul class="features">
13 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> 5GB Storage</li>
14 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> Email Support</li>
15 </ul>
16 <button class="btn btn-primary select-btn">Select</button>
17 <span class="trust-badge">Trusted by 5000+ users</span>
18 </div>
19 <div class="gs-plan card mx-2">
20 <h3>Pro Plan</h3>
21 <p class="price">$29.99/mo</p>
22 <ul class="features">
23 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> 50GB Storage</li>
24 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> Priority Support</li>
25 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> Team Access</li>
26 </ul>
27 <button class="btn btn-primary select-btn">Select</button>
28 <span class="trust-badge">Best Seller!</span>
29 </div>
30 <div class="gs-plan card mx-2">
31 <h3>Enterprise Plan</h3>
32 <p class="price">$99.99/mo</p>
33 <ul class="features">
34 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> Unlimited Storage</li>
35 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> 24/7 Support</li>
36 <li><svg width="16" height="16"><path d="M1 9 L8 15 L15 1" stroke="currentColor" stroke-width="2" fill="none"></path></svg> Dedicated Manager</li>
37 </ul>
38 <button class="btn btn-primary select-btn">Select</button>
39 <span class="trust-badge">For enterprises</span>
40 </div>
41 </div>
42 </div>
43 </div>
44</section>More Cards snippets
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.
CardsView →
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.
CardsView →
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.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.