Home
Piet Vriend
Pricing card

Pricing card

This tailwind example is contributed by Piet Vriend, on 12-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Piet Vriend

8.7k

Fork Fullscreen

<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-xs">
    <div class="bg-purple-500 px-6 py-8">
        <h3 class="text-lg font-medium text-white">Starter Plan</h3>
        <p class="text-gray-200 mt-2">The perfect plan to get started</p>
        <p class="text-gray-200 mt-2 text-2xl font-bold">$9<span class="text-white text-base font-medium">/month</span>
        </p>
    </div>
    <div class="px-6 py-8">
        <ul class="text-gray-700 text-base leading-6">
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Unlimited users</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>10GB storage</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Email support</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Basic analytics</li>
        </ul>
        <button class="mt-6 px-4 py-2 bg-purple-500 text-white font-medium rounded-full hover:bg-purple-600 transition duration-200">Sign up now</button>
    </div>
</div>

Related Examples

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

Author:
Rajesh Maheshwari

8 months ago

761
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

4 months ago

1.4k
Pricing section with tailwind css

Author:
Task Master

2 years ago

11.2k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

8 months ago

1.3k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

2 years ago

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

7 months ago

1.1k
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

5 days ago

63
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.9k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.7k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

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

Author:
Mehmet Kaplan

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components