Pricing table with 2 columns

This tailwind example is contributed by Piet Vriend, on 14-Dec-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Piet Vriend

Tailwind v3.4 13.4k 8

Fork Fullscreen

<section class="bg-white dark:bg-gray-900">
    <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-24 lg:px-6">
        <div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
            <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Designed for business
                teams like yours</h2>
            <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Here at Landwind we focus on markets
                where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
        </div>
        <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">

<div
                class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <h3 class="mb-4 text-2xl font-semibold">Starter</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best option for personal use &amp; for
                    your next project.</p>
                <div class="flex items-baseline justify-center my-8">
                    <span class="mr-2 text-5xl font-extrabold">$29</span>
                    <span class="text-gray-500 dark:text-gray-400">/month</span>
                </div>

<div
                class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <h3 class="mb-4 text-2xl font-semibold">Company</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Relevant for multiple users, extended
                    &amp; premium support.</p>
                <div class="flex items-baseline justify-center my-8">
                    <span class="mr-2 text-5xl font-extrabold">$99</span>
                    <span class="text-gray-500 dark:text-gray-400" dark:text-gray-400="">/month</span>
                </div>

<div
                class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <h3 class="mb-4 text-2xl font-semibold">Enterprise</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best for large scale uses and extended
                    redistribution rights.</p>
                <div class="flex items-baseline justify-center my-8">
                    <span class="mr-2 text-5xl font-extrabold">$499</span>
                    <span class="text-gray-500 dark:text-gray-400">/month</span>
                </div>

Related Examples

Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing cards in pair

Nour Haider

3 years ago

14.9k
Pricing cards

Freja Jensen

3 years ago

10.8k
Pricing cards - with features list
Flexible Pricing Plans Cards

Anonymous

2 years ago

4.9k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

2 years ago

12.6k
Fancy pricing card

Laurits

3 years ago

14.6k
Pricing section

Leon Bachmann

3 years ago

12.9k
Product / Service pricing section

Sophia Baker

3 years ago

13.2k
Pricing card

Laurits

3 years ago

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

Samuel Dawson

3 years ago

11.8k
Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.6k
Pricing cards pair

Samuel Dawson

3 years ago

11.2k