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

Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

5 months ago

362
Pricing card single

Author:
Manuela Bianka

4 months ago

432
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.5k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

2 years ago

12.8k
Pricing card

Author:
Laurits

2 years ago

10.8k
"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)

3 months ago

516
Pricing Table

Author:
Akshay

3 years ago

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

Author:
Anonymous

1 year ago

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

Author:
Christian Ahlin

10 months ago

1.7k
Card
Card

Author:
Aman kumar

1 year ago

1.3k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

9 months ago

1.1k
Fancy pricing card

Author:
Laurits

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components