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

9.8k

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