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

803

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

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

Author:
Rajesh Maheshwari

5 months ago

581
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 weeks ago

157
SoungCraft
Used for making and trading songs

Author:
Frederick250

2 months ago

91
Pricing section with tailwind css

Author:
Task Master

2 years ago

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

Author:
Christian Ahlin

7 months ago

1.2k
Pricing card for subscription

Author:
Task Master

2 years ago

10.8k
Semi transparent pricing cards

Author:
Anonymous

1 year ago

8.5k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

3 months ago

495
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

11 months ago

1.8k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.3k
Pricing card

Author:
Sophia Baker

2 years ago

8.2k
Horizontal pricing card

Author:
Anonymous

4 months ago

506

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components