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.9k

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

Author:
Anonymous

1 year ago

1.4k
Payment form

Author:
ORGIN_DREAMS

6 months ago

468
Simple pricing cards

Author:
S. Patel

2 years ago

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

Author:
Anonymous

1 year ago

4.2k
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

2 years ago

9.2k
Semi transparent pricing cards

Author:
Anonymous

2 years ago

9k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

6 months ago

550
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.7k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.7k
Pricing card

Author:
Sophia Baker

3 years ago

8.6k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

9 months ago

1.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

7 months ago

904

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components