Home
Leon Bachmann
Pricing section

Pricing section

This tailwind example is contributed by Leon Bachmann, on 19-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Leon Bachmann

12.3k

Fork Fullscreen

<div class="mt-8 p-10 sm:mt-10 space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-3xl lg:mx-auto">
    <div class="border border-neutral-200 rounded-lg shadow-sm divide-y divide-neutral-200">
        <div class="p-6">
            <h2 class="text-lg leading-6 font-medium text-neutral-900">Personal</h2>
            <p class="mt-4 text-sm h-10 text-neutral-500">For Notion users getting started on Twitter.</p>
            <p class="mt-4 flex flex-col space-y-2">
                <span class="text-5xl font-extrabold text-neutral-900">Free</span>
            </p>
            <a href="#"
                class="mt-8 block w-full bg-blue-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Get
                Started
            </a>
        </div>
        <div class="pt-6 pb-8 px-6">
            <h3 class="text-xs font-medium text-neutral-900 tracking-wide uppercase">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">10 tweets/month</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">2 threads/month</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Only you</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="border border-neutral-200 rounded-lg shadow-sm divide-y divide-neutral-200">
        <div class="p-6">
            <h2 class="text-lg leading-6 font-medium text-neutral-900">Personal Pro</h2>
            <p class="mt-4 text-sm h-10 text-neutral-500">For professionals who use Notion to write, collaborate, plan,
                and grow on Twitter.</p>
            <p class="mt-4 flex flex-col space-y-2">

<span class="flex flex-row space-x-2 items-center">
                    <span class="text-5xl font-extrabold text-neutral-900">$9</span>
                <span class="text-xs font-medium text-neutral-500">per month<br> billed annually</span></span>
            </p>
            <a href="#"
                class="mt-8 block w-full bg-blue-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Get
                Started
            </a>
        </div>
        <div class="pt-6 pb-8 px-6">
            <h3 class="text-xs font-medium text-neutral-900 tracking-wide uppercase">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Unlimited tweets</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Unlimited threads</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Real-time analytics</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Collaborate with unlimited guests</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Related Examples

Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

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

10 months ago

1.4k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

707
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

3 months ago

85
Pricing card single

Author:
Manuela Bianka

8 months ago

543
pricing
pricing

Author:
Omer fils ELENGA

6 months ago

527
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

10.2k
Pricing cards

Author:
Freja Jensen

2 years ago

10.2k
Card template

Author:
Raul antonio de la cruz hernandez

4 weeks ago

37
Pricing cards pair

Author:
Samuel Dawson

3 years ago

11k
Subscription
Subscription list

Author:
Abhiraj

11 months ago

849

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components