Home
Paul Intay
Modern pricing cards

Modern pricing cards

Minimal and clean pricing cards

This tailwind example is contributed by Paul Intay, on 14-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Paul Intay

1.4k

Fork Fullscreen

<section class="py-12 bg-gray-50 font-poppins dark:bg-gray-800">
  <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
        Pricing Plans
      </h2>
      <p class="mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">
        Choose the plan that's right for you.
      </p>
    </div>

<div
      class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-3">
      <div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Basic</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$19</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">10 users included</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">2 GB of storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Email support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Basic</a>
        </div>
      </div>

<div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Pro</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$49</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">25 users included</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">10 GB of storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Email and phone support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Pro</a>
        </div>
      </div>

<div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Enterprise</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$99</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Unlimited users</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Unlimited storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Dedicated support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Enterprise</a>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Product card

Author:
Anum Shahana

1 year ago

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

10 months ago

1.5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.8k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

7 months ago

835
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

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

Author:
Andreas Wagner

2 years ago

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

1 year ago

2.2k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

7k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

1 year ago

1.4k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

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

10 months ago

613
Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components