Pricing card

This tailwind example is contributed by Laurits, on 04-Nov-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Laurits

Tailwind v3.4 11.6k 12

Fork Fullscreen

<div class="max-w-sm  flex flex-col rounded-3xl bg-white dark:bg-gray-950 shadow-xl ring-1 ring-black/10">
    <div class="p-8 sm:p-10">
        <h3 id="tier-basic" class="text-lg font-semibold leading-8 tracking-tight text-indigo-600">Basic</h3>
        <div class="mt-4 flex items-baseline text-5xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
            <span> $25 </span>
            <span class="text-lg font-semibold leading-8 tracking-normal text-gray-500">/mo</span>
        </div>
        <p class="mt-6 text-base leading-7 text-gray-600 dark:text-slate-200">
            The Basic plan is the perfect starting point for new users.
            Join now to get a taste of all the features &amp; benefits that Subtxt has to offer.

</p>
    </div>
    <div class="flex flex-1 flex-col p-2">
        <div class="flex flex-1 flex-col justify-between rounded-2xl bg-gray-50 dark:bg-gray-900 p-6 sm:p-8">
            <ul role="list" class="space-y-6">
                <li class="flex items-start">
                    <p class="ml-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
                        550+ Unique Story Structures
                    </p>
                </li>
                <li class="flex items-start">
                    <p class="ml-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
                        100 AI Tokens/Month
                    </p>
                </li>
                <li class="flex items-start">
                    <p class="ml-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
                        Unlimited AI Assistance
                    </p>
                </li>
                <li class="flex items-start">
                    <p class="ml-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
                        Fine-Tuned Story Models
                    </p>
                </li>
            </ul>
            <div class="mt-8">
                <a href="#" aria-describedby="tier-basic"
                    class="inline-block w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold leading-5 text-white shadow-md hover:bg-indigo-700">
                    Get started today
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

3 pricing cards

Laurits

3 years ago

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

Elsabe Fourie

2 years ago

12.6k
Pricing section with tailwind css

Task Master

3 years ago

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

Samuel Dawson

3 years ago

11.8k
Pricing cards

Freja Jensen

3 years ago

10.7k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Rathanak Phan

1 year ago

2.8k
Simple pricing card
minimal pricing card

Anonymous

3 years ago

9.7k
Pricing card
basic pricing card with single price

Kaung Htet Min

11 months ago

547
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.7k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Andreas Ludvigsson

2 years ago

4.1k
Pricing cards
pricing section with 3 cards

Noob

4 years ago

12.4k