Home
Laurits
Pricing card

Pricing card

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

Pricing

Author Laurits

11k

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

Author:
Laurits

3 years ago

14.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

2 years ago

11.7k
Pricing section with tailwind css

Author:
Task Master

3 years ago

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

Author:
Samuel Dawson

3 years ago

11.2k
Pricing cards

Author:
Freja Jensen

2 years ago

10.2k
Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
Pricing cards pair

Author:
Samuel Dawson

3 years ago

11k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

4 months ago

555
PLAN SECTION

Author:
ABDO-SY

9 months ago

894
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

2 years ago

13.3k
Simple pricing cards

Author:
S. Patel

2 years ago

11.1k
Pricing card

Author:
Piet Vriend

2 years ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components