Pricing Cards

the component is designed to showcase and compare prices between different subscription plans.

This tailwind example is contributed by Anonymous, on 15-Nov-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Anonymous

Tailwind v3.4 7.9k 17

Fork Fullscreen

<div class="" id="pricing">
  <div class="mx-auto max-w-7xl py-24 px-4 sm:px-6 lg:px-8">
    <div class="sm:align-center sm:flex sm:flex-col mx-auto max-w-3xl">
      <h1 class="max-w-xl mx-auto leading-tight text-3xl font-bold tracking-tight sm:text-center">Pricing</h1>
      <p class="mt-4 text-md sm:text-center">Save hours by efficiently managing your video content</p>
    </div>
    <div class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-3">
      
      <div class="divide-y bg-white divide-gray-200 rounded-lg border border-gray-200 shadow-md">
        <div class="p-6">
          <h2 class="text-lg font-medium leading-6 text-gray-900">FREE</h2>
          <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">$<span id="basicPlanPrice">0</span><span class="text-base font-medium text-gray-500 ml-1">/month</span></p>
          <div class="flex-col">
            <button class="shadow-lg mt-3 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Get Started →</button>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">Add Up to 3 Videos</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">Ask Up to 20 Questions</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white border-2 rounded-lg shadow-md">
        <div class="p-6">
          <div class="flex items-center">
            <h2 class="text-lg uppercase font-medium leading-6 text-gray-900">Premium Monthly</h2>
          </div>
          <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">$<span id="basicPlanPrice">100</span><span class="text-base font-medium text-gray-500 ml-1">/month</span></p>
          <div class="relative">
            <div class="flex-col">
              <button class="shadow-lg mt-3 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Subscribe to Premium</button>
            </div>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8 border-t">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Video Length Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Daily Add Video Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Daily Questions Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">Longer Reply Length</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white divide-gray-200 rounded-lg border-2 shadow-md">
        <div class="p-6">
          <div class="flex items-center">
            <h2 class="text-lg uppercase font-medium leading-6 text-gray-900">Premium Yearly</h2>
          </div>
          <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">$<span id="basicPlanPrice">1000</span><span class="text-base font-medium text-gray-500 ml-1">/year</span></p>
          <div class="relative">
            <div class="flex-col">
              <button class="shadow-lg mt-3 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Subscribe to Premium</button>
            </div>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Video Length Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Daily Add Video Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">No Daily Questions Limit</span>
            </li>
            <li class="flex space-x-3 items-center">
              <div class="w-6 h-6 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span class="text-md text-gray-800">Longer Reply Length</span>
            </li>
          </ul>
        </div>
      </div>

</div>
  </div>
</div>

Related Examples

Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1k
Simple pricing cards

S. Patel

3 years ago

11.8k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Omer fils ELENGA

10 months ago

625
Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
Fancy pricing card

Laurits

3 years ago

14.6k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Price
Pricing

Jean Claude Nguetta

11 months ago

722
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
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Pricing table
Pricing table with background gradient

Samuel Dawson

3 years ago

11.6k