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

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

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

2 months ago

181
Product / Service pricing section

Author:
Sophia Baker

2 years ago

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

Author:
EliteAI Tools

6 months ago

556
Payment form

Author:
ORGIN_DREAMS

1 month ago

108
Pricing section

Author:
Leon Bachmann

2 years ago

11.7k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

10.9k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.7k
Card
Card

Author:
Aman kumar

1 year ago

2k
3 pricing cards

Author:
Laurits

2 years ago

13.8k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.1k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components