Home
Sophia Baker
Pricing card

Pricing card

This tailwind example is contributed by Sophia Baker, on 28-Nov-2022. Component is made with Tailwind CSS v3. similar terms for this example are Service rates, Subscription plans

Pricing

Author Sophia Baker

7.9k

Fork Fullscreen

<div class="relative py-4 xl:pt-8">
        <h3 class="text-2xl font-bold">Most popular</h3>

<div class="absolute top-0 w-[90%] border-green-300 border-b border-r rounded-br-xl pr-4 py-4 xl:pt-8">
            <h3 class="text-2xl font-bold text-transparent">Most popular</h3>
        </div>
    </div>

<div class="pt-4 p-6 xl:p-8">
        <p class="hidden font-light text-green-700 sm:text-lg">Best option for personal use &amp; for your next project.
        </p>
        <div class="flex justify-center items-baseline my-8">
            <span class="mr-2 text-5xl font-normal">$129</span>
            <span class="text-2xl">/month</span>
        </div>

<ul role="list" class="mb-8 space-y-4 text-left text-green-700">
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <span>1000 Monthly Articles</span>
            </li>
            <li class="hidden items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <span class="font-semibold">$0.13 per article</span>
            </li>
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <span>38 Niches</span>
            </li>
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <span>7 Languages</span>
            </li>

</ul>
        <a href="#"
            class="block text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-500 font-bold rounded-lg text-base px-5 py-2.5 text-center">Start
            Free Trial
        </a>
    </div>

</div>

Related Examples

Pricing card
Reveal details on hover

Author:
Anonymous

10 months ago

2.4k
Card
Card

Author:
Aman kumar

7 months ago

1.6k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

10 months ago

1.5k
Pricing Card

Author:
Amit Pachange

2 years ago

12.6k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

5 days ago

27
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

1 year ago

7.4k
Basic pricing card

Author:
Sienna

1 year ago

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

Author:
Andreas Wagner

1 year ago

12.2k
Pricing cards in pair

Author:
Santiago Hernandez

9 months ago

1.3k
3 pricing cards

Author:
Laurits

2 years ago

12.9k
Product card

Author:
Anum Shahana

2 months ago

412
Product / Service pricing section

Author:
Sophia Baker

2 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components