Home
Anonymous
Pricing Cards

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 CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Anonymous

6.6k

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 card
Reveal details on hover

Author:
Anonymous

1 year ago

3.3k
Horizontal pricing card

Author:
Anonymous

2 months ago

180
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

5 months ago

537
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.5k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.9k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2k
Pricing table

Author:
Laurits

2 years ago

10k
Basic pricing card

Author:
Sienna

2 years ago

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

Author:
Andreas Wagner

1 year ago

12.9k
Pricing Card with Toggle

Author:
Paul Intay

5 months ago

778
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

10.1k
Pricing card

Author:
Piet Vriend

2 years ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components