Explore our playful pricing plans with a stunning claymorphic design and interactive trust signals, all within a vibrant retro synthwave theme.
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>
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
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.