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

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

13.9k
Product / Service pricing section

Author:
Sophia Baker

3 years ago

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

11 months ago

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

7 months ago

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

4 months ago

583
Pricing card

Author:
Task Master

3 years ago

9.1k
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Author:
Prajwal Hallale

1 year ago

578
Pricing card

Author:
Piet Vriend

2 years ago

8.9k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

8 months ago

543
Pricing card

Author:
Laurits

3 years ago

11k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

7 months ago

757

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components