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

10.3k

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

2 years ago

13.3k
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.2k
Pricing section with tailwind css

Author:
Task Master

2 years ago

10.4k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.1k
Pricing cards

Author:
Freja Jensen

2 years ago

9k
Horizontal pricing card

Author:
Anonymous

1 month ago

73
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

2.4k
Pricing section

Author:
Leon Bachmann

2 years ago

11.5k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 days ago

20
Basic pricing card

Author:
Sienna

2 years ago

10.2k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components