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 table

Author:
Laurits

2 years ago

10.1k
Pricing card

Author:
Laurits

2 years ago

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

Author:
Anonymous

1 year ago

4k
Payment form

Author:
ORGIN_DREAMS

1 month ago

68
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

3 months ago

468
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

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

Author:
Rathanak Phan

1 week ago

16
Card
Card

Author:
Aman kumar

11 months ago

1.1k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

1 week ago

206
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

4 months ago

995
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

3 weeks ago

49
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

2 months ago

187

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components