Home
Anonymous
Minimal pricing card design

Minimal pricing card design

This tailwind example is contributed by Anonymous, on 07-Sep-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.5k

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

Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

8 months ago

1.2k
Payment form

Author:
ORGIN_DREAMS

8 months ago

567
Fancy pricing card

Author:
Laurits

3 years ago

13.9k
Pricing section

Author:
Leon Bachmann

3 years ago

12.3k
Pricing card

Author:
Task Master

3 years ago

9.1k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.8k
Simple yet stylish pricing table

Author:
Laurits

3 years ago

8.9k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

7 months ago

757
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.8k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

1 month ago

73
Pricing Plans

Author:
ariaw

4 months ago

504
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

7 months ago

822

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components