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

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.2k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

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

6 months ago

1.4k
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 months ago

814
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

4 months ago

793
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

6.9k
Pricing Table

Author:
Akshay

3 years ago

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

5 months ago

635
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Product Page
This is a product page, made with HTML and Tailwind CSS, in desktop have 3 columns, Models/Variants - Images with thumbnails - Product Details. On the other hand have 2 images technicals, finally descriptions and button to add to cart.

Author:
Andrés Abarzúa

3 weeks ago

134
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

9 months ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components