Basic pricing card

This tailwind example is contributed by Sienna, on 02-Mar-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Sienna

Tailwind v3.4 11.3k 12

Fork Fullscreen

<div class="relative py-6 md:mr-8 px-8 rounded-lg bg-gray-100 w-full md:w-6/12 mt-6 md:mb-0">
    <div class="flex justify-between">
        <div class="w-full">
            <div class="text-blue-900 text-lg font-medium mb-2">Lifetime</div>
            <div class="text-dark-2 text-sm leading-tight">Access forever</div>
        </div>
        <div class="text-dark-1 text-4xl leading-none text-right">
            $349<span class="ml-1 text-dark-2 text-base">/once</span></div>
    </div>
    <div class="border-b border-light-2 w-full mt-6 mb-8"></div>
    <ul class="mb-10">
        <li class="flex items-center gap-1 text-blue-900 text-sm font-medium mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24">
                <path
                    d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
            </svg>
            <span>One payment, access forever
            </span>
        </li>
        <li class="flex items-center gap-1 text-blue-900 text-sm font-medium mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24">
                <path
                    d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
            </svg>
            <span>All features and benefits
            </span>
        </li>
    </ul>
    <a class="inline-flex items-center justify-center bg-blue-400 text-white h-10 px-5 rounded-lg text-sm font-medium leading-none transition-all duration-200 whitespace-nowrap disabled:opacity-50 disabled:cursor-default hover:bg-blue-4 w-full"
        href="#">
        <span>Get started</span>
    </a>
</div>

Related Examples

Pricing section with tailwind css

Task Master

3 years ago

12.1k
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
Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k
Minimal pricing card design

Anonymous

3 years ago

8.2k
Pricing Plans UI
A modern, responsive pricing plan cards

EliteAI Tools

1 year ago

1.9k
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/

Achraf Testq

5 months ago

606
Semi transparent pricing cards

Anonymous

3 years ago

9.7k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

612
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

irahoza daniel

1 year ago

1.3k
Pricing Section
Our pricing plan section with 3 packages

Emdadul Islam

2 years ago

3.7k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

254
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

3 years ago

10.9k