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

2 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

2 years ago

9.3k
3 pricing cards

Laurits

3 years ago

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

Andreas Wagner

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

Paul Intay

2 years ago

3.8k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

255
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

998
Subscription
Subscription list

Abhiraj

1 year ago

1.7k