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

7.1k

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

10 months ago

1.5k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.9k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

2.6k
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

4 months ago

456
Horizontal Pricing Card

Author:
Mereani Waqa

2 years ago

5.7k
Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

13.1k
Pricing section

Author:
Leon Bachmann

3 years ago

12.3k
partql
partql

Author:
sh22gr

1 month ago

171
Pricing card with CTA

Author:
Laurits

3 years ago

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

11 months ago

1.5k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.8k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

9 months ago

751

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components