Home
Anonymous
Semi transparent pricing cards

Semi transparent pricing cards

This tailwind example is contributed by Anonymous, on 22-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Anonymous

8.5k

Fork Fullscreen

<section style="background-image: url(https://i.pinimg.com/564x/00/0f/8f/000f8f7a38b4b4293d54da315245178d.jpg)"
      class="h-full bg-cover bg-center bg-fixed bg-no-repeat dark:bg-gray-800 px-2">
      <div class="container px-6 py-8 mx-auto">
            <div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
                  <div
                        class="px-6 py-4 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-opacity-20 duration-200 transform rounded-lg">
                        <p class="text-lg font-medium text-white dark:text-gray-100">Intro</p>
                        <h4 class="mt-2 text-4xl font-semibold text-white dark:text-gray-100">$19
                              <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
                        <p class="mt-4 text-white dark:text-gray-300">For most businesses that want to optimaize web
                              queries.</p>

<span class="mx-4 text-gray-400 dark:text-gray-300">All limited links</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Own analytics platform</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Chat support</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Optimize hashtags</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Unlimited users</span>
                              </div>
                        </div>

<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Choose plan</button>
                  </div>

<div
                        class="px-6 mb-4 -mt-3.5 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-opacity-20 duration-200 transform rounded-lg">
                        <p class="text-lg font-medium text-gray-100">Popular</p>
                        <h4 class="mt-2 text-4xl font-semibold text-gray-100">$99
                              <span class="text-base font-normal text-gray-400">/ Month</span></h4>
                        <p class="mt-4 text-gray-300">For most businesses that want to optimaize web queries.</p>

<span class="mx-4 text-gray-300">All limited links</span>
                              </div>

<span class="mx-4 text-gray-300">Own analytics platform</span>
                              </div>

<span class="mx-4 text-gray-300">Chat support</span>
                              </div>

<span class="mx-4 text-gray-300">Optimize hashtags</span>
                              </div>

<span class="mx-4 text-gray-300">Unlimited users</span>
                              </div>
                        </div>

<div
                        class="px-6 py-4 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-opacity-20 duration-200 transform rounded-lg">
                        <p class="text-lg font-medium text-white dark:text-gray-100">Exterprise</p>
                        <h4 class="mt-2 text-4xl font-semibold text-white dark:text-gray-100">$199
                              <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
                        <p class="mt-4 text-white dark:text-gray-300">For most businesses that want to optimaize web
                              queries.</p>

<span class="mx-4 text-gray-400 dark:text-gray-300">All limited links</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Own analytics platform</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Chat support</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Optimize hashtags</span>
                              </div>

<span class="mx-4 text-gray-400 dark:text-gray-300">Unlimited users</span>
                              </div>
                        </div>

Related Examples

Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

8.8k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

1 year ago

8.3k
3 pricing cards

Author:
Laurits

2 years ago

14k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

13.4k
Pricing Card

Author:
Amit Pachange

2 years ago

13.1k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

2 years ago

12.5k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.2k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

11.1k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

389
Card
Card

Author:
Aman kumar

1 year ago

2.1k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

6 months ago

1k
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components