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

6.8k

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

The future ai
The is technology

Author:
ORGIN_DREAMS

2 months ago

198
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
Pricing card with CTA

Author:
Laurits

2 years ago

9.7k
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

1 year ago

6.3k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.1k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

11k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

6.9k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.9k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.9k
Pricing Card with Toggle

Author:
Paul Intay

7 months ago

901
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

2 months ago

163
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

656

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components