Pricing cards in pair

This tailwind example is contributed by Santiago Hernandez, on 05-May-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Santiago Hernandez

Tailwind v3.4 2.8k 6

Fork Fullscreen

<div class="max-w-4xl flex-col m-auto flex items-center gap-4 text-center  dark:text-white">
        <h1 id="pricing" class="text-3xl font-extrabold tracking-tight lg:text-4xl">Pricing</h1>
        <p class="text-lg font-semibold">Fair and straightforward pricing.</p>
        <div class="flex items-center flex-col lg:flex-row">
            <div
                class="rounded-lg border shadow-sm bg-gray-50 dark:bg-gray-900/80 max-w-md lg:rounded-r-none lg:border-r-0 border-b-0 lg:border-b rounded-b-none lg:rounded-b">
                <div class="flex flex-col space-y-1.5 p-6">
                    <h3 class="text-2xl font-semibold leading-none tracking-tight">Basic</h3>
                    <p class="text-sm text-slate-600 dark:text-gray-400">Perfect for small-scale analysis</p>
                </div>
                <div class="p-6 pt-0">
                    <ul class="list-disc list-inside">
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Up to 10,000 data rows</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Limited to 3 analysis types</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Limited data visualization</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rounded-lg border shadow-sm max-w-xs w-full dark:bg-gray-900">
                <div class="flex flex-col space-y-1.5 p-6">
                    <div
                        class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground m-auto w-fit">
                        Monthly Subscription</div>
                    <h3 class="text-2xl font-semibold leading-none tracking-tight">Pro $49
                        <span class="line-through text-slate-600 dark:text-gray-400 text-base">$69</span>
                    </h3>
                    <p class="text-sm text-slate-600 dark:text-gray-400">Ideal for professional analysts</p>
                </div>
                <div class="p-6 pt-0">
                    <ul class="list-disc list-inside">
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Unlimited data rows</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Advanced analysis features</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">Customizable data visualizations</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="inline-block text-green-500 dark:text-green-400">
                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z">
                                </path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                            <span class="flex-1 text-left">24/7 Priority Support</span>
                        </li>
                    </ul>
                </div>
                <div class="flex items-center p-6 pt-0">
                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-gray-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-teal-500 text-white hover:bg-teal-500/90 h-10 px-4 py-2">Subscribe Now</button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Anonymous

2 years ago

7.9k
Price
Pricing

Jean Claude Nguetta

11 months ago

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

Andreas Wagner

2 years ago

15.4k
Card
Card

Aman kumar

2 years ago

2.2k
payement cart virtual
payement cart virtual

Omer fils ELENGA

6 months ago

434
Clean pricing cards

Freja Jensen

3 years ago

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

Mehmet Kaplan

2 years ago

4.3k
Subscription Plan Section
Clean and modern Subscription Plan section

Nikolai

2 years ago

3.4k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Rathanak Phan

1 year ago

2.8k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Ahmath S.

1 year ago

965