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

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

653
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

10 months ago

814
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

14.3k
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

1 year ago

1.1k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
Pricing card

Author:
Laurits

3 years ago

11.1k
Frontend Template Open Source Code Website
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:
Rathanak Phan

9 months ago

1.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components