Pricing card

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

Pricing

Author Piet Vriend

Tailwind v3.4 9.6k 15

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

Paiement Mobile MTN
Paiement Mobile MTN

Omer fils ELENGA

7 months ago

485
Card template

Raul antonio de la cruz hernandez

9 months ago

796
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k
pricing Nos Collections du Monde
pricing Nos Collections du Monde

Omer fils ELENGA

7 months ago

433
Pricing cards

Freja Jensen

3 years ago

10.8k
Pricing card with CTA

Laurits

3 years ago

10.4k
Pricing card single
Horizontal pricing card

Dika Rahman

2 years ago

3.9k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

2 years ago

12.6k
Simple pricing cards

S. Patel

3 years ago

11.8k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Matti

1 year ago

1.8k