Home
Task Master
Pricing card for subscription

Pricing card for subscription

This tailwind example is contributed by Task Master, on 30-Dec-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 Task Master

10.2k

Fork Fullscreen

<div class="p-4 h-screen dark:bg-gray-800">
    <div
        class="max-w-lg mx-auto rounded-lg overflow-hidden lg:max-w-none lg:flex my-10 shadow-teal border-4 border-teal-400">
        <div class="bg-white px-6 py-8 lg:flex-shrink-1 lg:p-12 dark:bg-gray-900">
            <h3
                class="text-2xl text-left leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9 dark:text-gray-100">
                Subscription
            </h3>
            <p class="mt-6 text-left font-ttnorms leading-8 text-gray-500 text-lg dark:text-gray-400">The Team
                subscription grants your
                entire
                As a subscriber to our website, you'll have access to a wide range of exclusive benefits and perks.
            </p>
            <div class="mt-8">
                <div class="flex items-center">
                    <h4
                        class="flex-shrink-0 pr-4 bg-white text-sm leading-5 tracking-wider font-semibold uppercase text-teal-600 dark:text-teal-300 dark:bg-transparent">
                        What's included
                    </h4>
                    <div class="flex-1 border-t-2 border-gray-200 dark:border-gray-700"></div>
                </div>
                <ul class="pl-0 mt-8 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5 space-y-5 lg:space-y-0">
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd">
                                </path>
                            </svg>
                        </div>
                        <p class="ml-3 text-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Access to premium content and exclusive articles
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd">
                                </path>
                            </svg>
                        </div>
                        <p class="ml-3 text-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Free Shipping on select products
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd">
                                </path>
                            </svg>
                        </div>
                        <p class="ml-3 text-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Early access to upcoming events and promotions
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd">
                                </path>
                            </svg>
                        </div>
                        <p class="ml-3 text-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Dedicated customer support
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <div
            class="py-8 px-6 text-center bg-gray-50 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12 dark:bg-gray-900">
            <p
                class="text-xl leading-6 font-medium text-gray-900 lg:max-w-xs lg:mx-auto mb-0 lg:mb-6 dark:text-gray-100">
                A single
                payment for your entire team
            </p>
            <div
                class="my-10 lg:my-6 flex items-baseline justify-center text-5xl leading-none font-extrabold text-gray-900 dark:text-gray-100">
                <span class="font-brown">$19</span><span class="text-xl leading-7 font-medium text-gray-500 font-ttnorms">/month</span>
            </div>
            <div class="lg:mt-6">
                <div class="rounded-md shadow">
                    <a href="#"
                        class="flex items-center justify-center px-5 py-3 leading-6 font-medium rounded-md focus:outline-none focus:ring transition duration-200 ease-in-out shadow-teal border-2 border-teal-400 bg-white hover:bg-teal-400 hover:shadow-teal-hover text-teal-400 hover:text-white text-lg relative z-20 dark:bg-teal-400 dark:text-white dark:hover:bg-teal-500 dark:hover:text-white">
                        Start your 7-day trial
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing section with tailwind css

Author:
Task Master

2 years ago

10.4k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

12.7k
3 pricing cards

Author:
Laurits

2 years ago

13.3k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

1 year ago

13.9k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

4.8k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

13.1k
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 Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

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

Author:
Samuel Dawson

2 years ago

10.1k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

5 days ago

9
Simple pricing cards

Author:
S. Patel

2 years ago

9.7k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

4 months ago

739

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components