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

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

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

1 month ago

163
Pricing card with CTA

Author:
Laurits

2 years ago

9.4k
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

1 year ago

8.5k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.2k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 months ago

388
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
Card
Card

Author:
Aman kumar

11 months ago

1.8k
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

1 month ago

153
Pricing section

Author:
Leon Bachmann

2 years ago

11.6k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

4 days ago

1
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.5k
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

3 months ago

928

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components