Home
Anonymous
Pricing Card

Pricing Card

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

Pricing

Author Anonymous

1.5k

Fork Fullscreen

<div class="max-w-sm w-full">
  <div class="relative group">
    <div
      class="absolute -inset-1 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200">
    </div>
    <div
      class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex flex-col items-top justify-start space-y-6">
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-gray-900">Pro Plan</span>
        <span class="px-3 py-1 text-sm text-white bg-purple-500 rounded-full">Popular</span>
      </div>
      <div class="text-5xl font-bold text-gray-900">$29<span class="text-lg font-normal text-gray-600">/mo</span>
      </div>
      <ul class="space-y-3">
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <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">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Advanced analytics
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          24/7 Support
        </li>
      </ul>
      <button class="w-full py-3 font-bold text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition duration-300 transform hover:scale-105">
                    Choose Plan
                </button>
      <div class="absolute -top-16 right-0 -mt-4 -mr-6 w-16 h-16 float-animation">
        <img src="https://www.svgrepo.com/show/506715/fire.svg" alt="Icon" class="w-full h-full object-cover rounded-full " />
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing cards in pair

Author:
Nour Haider

2 years ago

14.2k
Card Princing

Author:
Raul antonio de la cruz hernandez

2 months ago

51
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

10 months ago

1.5k
Pricing Card

Author:
Amit Pachange

3 years ago

13.4k
Pricing card with CTA

Author:
Laurits

3 years ago

10k
Simple yet stylish pricing table

Author:
Laurits

3 years ago

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

Author:
Rathanak Phan

8 months ago

2k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

595
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

9 months ago

1.2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Author:
Hamza Atig

2 months ago

233
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

3 months ago

168
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

10 months ago

852

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components