Home
EliteAI Tools
Pricing Plans UI

Pricing Plans UI

A modern, responsive pricing plan cards

This tailwind example is contributed by EliteAI Tools, on 19-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author EliteAI Tools

545

Fork Fullscreen

<div class="grid gap-8 mb-16 lg:grid-cols-3 p-4 md:p-8 mt-12">
    <div class="relative">
        <div class="flex flex-col justify-between h-full bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="p-6">
                <h3 class="text-2xl font-semibold text-gray-900">Basic</h3>
                <p class="mt-2 text-gray-600">We charge this small fee to avoid spam submissions.
                </p>
                <div class="mt-4">
                    <span class="text-4xl font-bold">$1</span>
                    <span class="ml-2 text-gray-600">one-time</span>
                </div>
                <ul class="mt-6 space-y-3">
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Listed within 2-5 days</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Standard visibility</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                        </svg> <span>Priority listing</span>
                    </li>
                </ul>
            </div>
            <div class="p-6 border-t border-gray-200 rounded-b-lg bg-gray-50">
                <a href="https://checkout.dodopayments.com/buy/pdt_To2Pk5SiRrPvvR2fUlEtr"
                    class="block w-full px-4 py-2 font-medium text-center text-white transition-colors bg-gray-900 rounded-lg hover:bg-gray-800">
                    List Now
                    <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                        data-slot="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3">
                        </path>
                    </svg> </a>
            </div>
        </div>
    </div>

<div class="relative">
        <div class="absolute left-0 right-0 flex justify-center -top-4">
            <span class="flex items-center gap-1 px-4 py-1 text-sm font-medium text-white rounded-full bg-gradient-to-r from-indigo-600 to-violet-600">
            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"></path>
</svg>            Most Popular
        </span>
        </div>
        <div class="flex flex-col justify-between h-full bg-white border-2 border-indigo-400 rounded-lg shadow-lg">
            <div class="p-6">
                <h3 class="text-2xl font-semibold text-gray-900">FastTrack</h3>
                <p class="mt-2 text-gray-600">Enhanced visibility for your tool</p>
                <div class="mt-4">
                    <span class="text-4xl font-bold">$30</span>
                    <span class="ml-2 text-gray-600">one-time</span>
                </div>
                <ul class="mt-6 space-y-3">
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Listed within 24 hours</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Priority listing</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>7 days in the featured section (throughout the website)</span>
                    </li>
                </ul>
            </div>
            <div class="p-6 border-t border-gray-200 rounded-b-lg bg-gray-50">
                <a href="https://checkout.dodopayments.com/buy/pdt_CaoQwT9zsubbLXZsHfcf0"
                    class="block w-full px-4 py-2 font-medium text-center text-white transition-colors rounded-lg bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700">
                    Get Featured
                    <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                        data-slot="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3">
                        </path>
                    </svg> </a>
            </div>
        </div>
    </div>

<div class="relative">
        <div class="flex flex-col justify-between h-full bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="p-6">
                <h3 class="text-2xl font-semibold text-gray-900">Boosted</h3>
                <p class="mt-2 text-gray-600">Maximum exposure package</p>
                <div class="mt-4">
                    <span class="text-4xl font-bold">$50</span>
                    <span class="ml-2 text-gray-600">one-time</span>
                </div>
                <ul class="mt-6 space-y-3">
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Listed within 24 hours</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>Priority listing</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                        </svg> <span>30 days in the featured section (throughout the website)</span>
                    </li>
                </ul>
            </div>
            <div class="p-6 border-t border-gray-200 rounded-b-lg bg-gray-50">
                <a href="https://checkout.dodopayments.com/buy/pdt_Xrd9mKf1ypuKzJVLJGo9m"
                    class="block w-full px-4 py-2 font-medium text-center text-white transition-colors bg-gray-900 rounded-lg hover:bg-gray-800">
                    Boost Now
                    <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                        data-slot="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3">
                        </path>
                    </svg> </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Minimal pricing card design

Author:
Anonymous

1 year ago

6.5k
Pricing card

Author:
Task Master

2 years ago

8.6k
Pricing card for subscription

Author:
Task Master

2 years ago

10.4k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

1 month ago

146
Basic pricing card

Author:
Sienna

2 years ago

10.3k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

5 months ago

851
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.4k
Simple yet stylish pricing table

Author:
Laurits

2 years ago

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

Author:
Anonymous

1 year ago

6.6k
Pricing card

Author:
Laurits

2 years ago

10.5k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
PLAN SECTION

Author:
ABDO-SY

1 month ago

61

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components