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

11.1k

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

15k
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

12k
Pricing section with tailwind css

Author:
Task Master

3 years ago

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

Author:
Samuel Dawson

3 years ago

11.3k
Pricing cards

Author:
Freja Jensen

3 years ago

10.3k
Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
Minimal pricing card design

Author:
Anonymous

2 years ago

7.5k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

651
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

2 years ago

2.9k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

11 months ago

1.5k
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

2 years ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components