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.7k

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.9k
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

2 years ago

8.4k
3 pricing cards

Author:
Laurits

2 years ago

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

Author:
Andreas Wagner

1 year ago

13.9k
Pricing Card

Author:
Amit Pachange

2 years ago

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

Author:
Kennedy Mills

2 years ago

12.8k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.5k
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.4k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.3k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

3 weeks ago

135
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.4k
"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)

3 months ago

516

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components