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 v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author EliteAI Tools

Tailwind v3.4 2k 5

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

Amit Pachange

3 years ago

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

Rafferty Kim

3 years ago

10.9k
Horizontal pricing card

Anonymous

1 year ago

1.7k
Simple pricing cards

S. Patel

3 years ago

11.8k
3 pricing cards

Laurits

3 years ago

15.4k
Product card

Anum Shahana

1 year ago

2k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Juan D. Cortorreal

11 months ago

1.3k
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

483
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

255
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Kennedy Mills

3 years ago

14.2k
Pricing table

Laurits

3 years ago

11.3k