Minimal pricing card design

This tailwind example is contributed by Anonymous, on 07-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Anonymous

Tailwind v3.4 8.2k 10

Fork Fullscreen

<div class="bg-white rounded-lg overflow-hidden shadow-lg">
  <div class="px-6 py-8">
    <h2 class="text-3xl font-semibold text-gray-800 mb-2">Pro Plan</h2>
    <p class="text-gray-600 mb-4">Perfect for professionals and teams</p>
    <div class="text-3xl font-bold text-gray-800 mb-4">$19<span class="text-lg font-normal text-gray-600">/month</span></div>
    <ul class="text-gray-600">
      <li class="flex items-center mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        Unlimited projects
      </li>
      <li class="flex items-center mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        24/7 support
      </li>
      <li class="flex items-center mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        Custom analytics
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        Secure data storage
      </li>
    </ul>
    <button class="mt-6 bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>

Related Examples

Pricing card with CTA

Laurits

3 years ago

10.4k
Pricing section - Htmlwind
Single pricing

Htmlwind

1 year ago

1.3k
Pricing card for subscription

Task Master

3 years ago

12k
Pricing Table

Akshay

4 years ago

11.4k
Ticket Options ios 26
Ticket Options ios 26

Omer fils ELENGA

10 months ago

507
Subscription
Subscription list

Abhiraj

1 year ago

1.7k
Pricing section
Pricing table with 3 cards for 3 plans

Leon Bachmann

3 years ago

12k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Rathanak Phan

1 year ago

2.8k
Payment form

ORGIN_DREAMS

1 year ago

1.1k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

SHARIFUL ISLAM

1 year ago

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

INGRIDE MUZIRANENGE

11 months ago

1.1k