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.6k

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

tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

5 months ago

380
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

7 months ago

1.1k
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

2.1k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.2k
Card
Card

Author:
Aman kumar

1 year ago

1.4k
Fancy pricing card

Author:
Laurits

2 years ago

13.7k
The future ai
The is technology

Author:
ORGIN_DREAMS

5 months ago

590
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

7 months ago

1.2k
Pricing section

Author:
Leon Bachmann

2 years ago

12.2k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

11 months ago

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

2 years ago

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

Author:
Andreas Wagner

2 years ago

14k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components