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

9.3k

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

2 years ago

9.5k
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.8k
3 pricing cards

Author:
Laurits

3 years ago

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

Author:
Andreas Wagner

2 years ago

14.7k
Pricing Card

Author:
Amit Pachange

3 years ago

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

Author:
Kennedy Mills

2 years ago

13.4k
Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

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

2 years ago

12k
Horizontal pricing card

Author:
Anonymous

1 year ago

1k
Pricing card

Author:
Sophia Baker

3 years ago

8.6k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

12k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components