Home
Nour Haider
Pricing cards in pair

Pricing cards in pair

This tailwind example is contributed by Nour Haider, on 05-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Nour Haider

13.2k

Fork Fullscreen

<section class="flex items-center justify-center mt-10 pb-10">
    <div class="p-4 sm:px-10 flex flex-col justify-center items-center text-base h-100vh mx-auto" id="pricing">
        <h3 class="text-5xl font-semibold text-center flex gap-2 justify-center mb-10">Pay once, use forever</h3>
        <div class="isolate mx-auto grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-2">
            <div class="ring-1 ring-gray-200 rounded-3xl p-8 xl:p-10">
                <div class="flex items-center justify-between gap-x-4">
                    <h3 id="tier-standard" class="text-gray-900 text-2xl font-semibold leading-8">Standard</h3>
                </div>
                <p class="mt-4 text-base leading-6 text-gray-600">1 license for only 1 activation</p>
                <p class="mt-6 flex items-baseline gap-x-1">
                    <span class="line-through text-2xl font-sans text-gray-500/70">$39</span><span
                        class="text-5xl font-bold tracking-tight text-gray-900">$29</span>
                </p>
                <a href=""
                    aria-describedby="tier-standard"
                    class="text-blue-600 ring-1 ring-inset ring-blue-200 hover:ring-blue-300 mt-6 block rounded-md py-2 px-3 text-center text-base font-medium leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                    target="_blank">Buy now</a>
                <ul role="list" class="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10">
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" aria-hidden="true" class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>Lifetime access
                    </li>
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" aria-hidden="true" class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>All AI features
                    </li>
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" aria-hidden="true" class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>Use your own OpenAI key
                    </li>
                </ul>
            </div>
            <div class="ring-2 ring-blue-600 rounded-3xl p-8 xl:p-10">
                <div class="flex items-center justify-between gap-x-4">
                    <h3 id="tier-extended" class="text-blue-600 text-2xl font-semibold leading-8">Extended</h3>
                    <p class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600">
                        Most popular</p>
                </div>
                <p class="mt-4 text-base leading-6 text-gray-600">1 license for up to 3 activations</p>
                <p class="mt-6 flex items-baseline gap-x-1">
                    <span class="line-through text-2xl font-sans text-gray-500/70">$59</span><span
                        class="text-5xl font-bold tracking-tight text-gray-900">$39</span>
                </p>
                <a href=""
                    aria-describedby="tier-extended"
                    class="bg-blue-600 text-white shadow-sm hover:bg-blue-500 mt-6 block rounded-md py-2 px-3 text-center text-base font-medium leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                    target="_blank">Buy now</a>
                <ul role="list" class="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10">
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" aria-hidden="true" class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>Lifetime access
                    </li>
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" aria-hidden="true" class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>All AI features
                    </li>
                    <li class="flex gap-x-3 text-base">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                            class="h-6 w-5 flex-none text-blue-600">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>Use your own OpenAI key
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

Related Examples

Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.6k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.2k
3 pricing cards

Author:
Laurits

2 years ago

14k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.5k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.6k
Fancy pricing card

Author:
Laurits

2 years ago

13.3k
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

11.4k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.9k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k
Simple pricing card
minimal pricing card

Author:
Anonymous

1 year ago

8.2k
Pricing Table

Author:
Akshay

3 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

3 months ago

296

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components