Semi transparent pricing cards

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

Pricing

Author Anonymous

Tailwind v3.4 9.7k 18

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.

Mereani Waqa

3 years ago

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

Computer guy

3 years ago

9.3k
3 pricing cards

Laurits

3 years ago

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

Andreas Wagner

3 years ago

15.4k
Pricing Card

Amit Pachange

3 years ago

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

Kennedy Mills

3 years ago

14.2k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

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

Elsabe Fourie

2 years ago

12.6k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

9 months ago

742
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

SHARIFUL ISLAM

1 year ago

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

bara masalma

1 year ago

1.5k
PLAN SECTION

ABDO-SY

1 year ago

1.7k