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

Game
prayer game candle game light candles with your prayers

Anonymous

1 year ago

1.5k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

8 months ago

885
Fancy pricing card

Laurits

3 years ago

14.6k
Basic pricing card

Sienna

3 years ago

12.1k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

255
Card
Card

Aman kumar

2 years ago

3k
Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.6k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

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

Andreas Wagner

3 years ago

15.4k
AgriSmart
used in agriculture for making profit and good production

INGRIDE MUZIRANENGE

11 months ago

1.1k
Pricing card

Laurits

3 years ago

11.7k
Basic pricing block

Leon Bachmann

3 years ago

7.6k