Home
Noob
Pricing cards

Pricing cards

pricing section with 3 cards

This tailwind example is contributed by Noob, on 10-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing eCommerce

Author Noob

12k

Fork Fullscreen

<div class="container m-auto">
    <div class="flex flex-wrap items-center justify-center w-full text-center">
        
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
            <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
                <div class="py-5 text-blue-700 bg-white">
                    <h3>Basic</h3>
                    <p class="text-5xl font-bold">
                        $19.<span class="text-3xl">95</span>
                    </p>
                    <p class="text-xs uppercase">Per Month</p>
                </div>
                <div class="py-5 bg-blue-700 text-white rounded-b">
                    <p>Feature of the plan</p>
                    <p>Another feature plan feature</p>
                    <p>Yet another plan feature</p>
                    <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                Get Started
              </button>
                </div>
            </div>
        </div>
        
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
            <div class="flex flex-col rounded">
                <div class="py-7 bg-blue-700 text-white rounded-t">
                    <p class="uppercase text-yellow-300 font-extrabold">
                        Most Popular
                    </p>
                    <h3>Standard</h3>
                    <p class="text-5xl font-bold">
                        $49.<span class="text-3xl">95</span>
                    </p>
                    <p class="text-xs uppercase">Per Month</p>
                </div>
                <div>
                    <div class="pt-1 pb-7 bg-blue-700 text-white rounded-b">
                        <p>Feature of the plan</p>
                        <p>Another feature plan feature</p>
                        <p>Yet another plan feature</p>
                        <button class="px-5 py-2 mt-5 uppercase rounded bg-yellow-300 text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                  Get Started
                </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
            <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
                <div class="py-5 text-blue-700 bg-white">
                    <h3>Advanced</h3>
                    <p class="text-5xl font-bold">
                        $99.<span class="text-3xl">95</span>
                    </p>
                    <p class="text-xs uppercase">Per Month</p>
                </div>
                <div class="py-5 bg-blue-700 text-white rounded-b">
                    <p>Feature of the plan</p>
                    <p>Another feature plan feature</p>
                    <p>Yet another plan feature</p>
                    <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                Get Started
              </button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing cards in pair

Author:
Nour Haider

2 years ago

14.2k
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

1 year ago

2.3k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

9 months ago

2k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

599
Payment Successful Page template with dark mode support

Author:
EliteAI Tools

1 year ago

2.5k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

2 years ago

3.2k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Simple yet stylish pricing table

Author:
Laurits

3 years ago

9.1k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

9 months ago

751
Payment Successful! Notification page

Author:
EliteAI Tools

1 year ago

2.8k
Product cards
Product cards for eCommerce

Author:
ehmasuk

4 months ago

583

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components