Home
Anonymous
Basic Pricing Cards

Basic Pricing Cards

highlight and promote different product or service 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.5k

Fork Fullscreen

<div class="mx-auto max-w-7xl py-24 px-4">
  <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">NewProduct.ai
      Pricing
    </h1>
    <p class="mt-4 text-md sm:text-center">Revolutionizing your workflow with AI</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">Basic</h2>
        <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">
          $<span id="basicPlanPrice">19.99</span><span class="text-base font-medium text-gray-500ml-1 ml-1">/month</span>
        </p>
        <div class="flex-col">
          <button class="shadow-lg mt-3 block w-full rounded-md border border-blue-800 bg-blue-800 py-2 text-center text-sm font-semibold text-white hover:bg-blue-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">Feature 1</span>
          </li>
          
        </ul>
      </div>
    </div>

<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">Standard</h2>
        <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">
          $<span id="standardPlanPrice">39.99</span><span class="text-base font-medium text-gray-500ml-1 ml-1">/month</span>
        </p>
        <div class="flex-col">
          <button class="shadow-lg mt-3 block w-full rounded-md border border-green-800 bg-green-800 py-2 text-center text-sm font-semibold text-white hover:bg-green-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">Feature 2</span>
          </li>
          
        </ul>
      </div>
    </div>

<div class="divide-y bg-white divide-gray-200 rounded-lg border-2 shadow-md">
      <div class="p-6">
        <h2 class="text-lg uppercase font-medium leading-6 text-gray-900">Premium</h2>
        <p class="my-4 text-4xl font-bold tracking-tight text-gray-900">
          $<span id="premiumPlanPrice">79.99</span><span class="text-base font-medium text-gray-500ml-1 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-purple-800 bg-purple-800 py-2 text-center text-sm font-semibold text-white hover:bg-purple-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">Feature 3</span>
          </li>
          
        </ul>
      </div>
    </div>

</div>
  
  <p class="text-sm text-gray-500 mt-4">*Need a custom plan or team license? Contact us at <a
      href="mailto:support@newproduct.ai" class="underline">support@newproduct.ai</a> or use live chat</p>
</div>

Related Examples

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

8 months ago

1.6k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

2 years ago

8.5k
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

5 months ago

540
Pricing section

Author:
Leon Bachmann

2 years ago

12.2k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

1 week ago

7
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

6 months ago

800
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

11.4k
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

10 months ago

666
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.6k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.5k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

6 months ago

645
Pricing table

Author:
Laurits

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components