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

11.3k

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

12.9k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

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

4 months ago

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

2 weeks ago

241
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

4 months ago

444
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

12.1k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.2k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

7 months ago

925
Product card

Author:
Anum Shahana

6 months ago

1.1k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

196
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

7 months ago

1.9k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

1 month ago

57

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components