Home
Manuela Bianka
Pricing card single

Pricing card single

This tailwind example is contributed by Manuela Bianka, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Manuela Bianka

335

Fork Fullscreen

<div class="py-16 bg-gray-50 lg:py-24" id="pricing">
  <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="mb-16 text-center">
      <h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl lg:text-5xl fade-in">
        One Plan, <span class="text-red-600">Unlimited Potential</span>
      </h2>
      <p class="max-w-3xl mx-auto text-lg leading-relaxed text-gray-700 sm:text-xl fade-in"
        style="animation-delay: 0.2s;">
        Everything you need to dominate Reddit lead generation in one comprehensive plan.
      </p>
    </div>

<div class="max-w-lg mx-auto">
      <div class="gradient-border fade-in" style="animation-delay: 0.3s;">
        <div
          class="inner-card relative overflow-hidden transition-transform duration-300 hover:shadow-2xl hover:-translate-y-1.5">
          <div class="absolute top-0 right-0 -mt-px">
            <div class="flex items-center h-8 px-4 font-semibold text-white bg-red-500 rounded-bl-lg rounded-tr-xl">
              Best Value
            </div>
          </div>

<div class="p-8">
            <div class="text-center mb-8">
              <h3 class="mb-2 text-3xl font-bold text-gray-800">Reddit Lead Master</h3>
              <p class="mb-6 text-gray-600">The complete Reddit lead generation solution</p>

<div class="flex items-baseline justify-center mb-4">
                <span class="text-5xl font-extrabold text-gray-800">$49</span>
                <span class="ml-1 text-2xl font-semibold text-gray-500">.99</span>
                <span class="ml-2 text-gray-500">/month</span>
              </div>

<p class="inline-block px-4 py-2 text-sm font-semibold text-red-700 bg-red-100 rounded-full">
                7 Day Free Trial
              </p>
            </div>

<div class="space-y-4 mb-8">
              <div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">1 Project Support + Add-on Capability</span>
                  <p class="text-sm text-gray-600">Start with one project, easily add more as you scale</p>
                </div>
              </div>

<div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">Save Hours of Work</span>
                  <p class="text-sm text-gray-600">Automated lead discovery and AI-powered insights</p>
                </div>
              </div>

<div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">Get Only Quality Leads</span>
                  <p class="text-sm text-gray-600">Advanced filtering ensures high-converting prospects</p>
                </div>
              </div>

<div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">400+ Top Subreddits Monitored</span>
                  <p class="text-sm text-gray-600">Growing database of the most valuable communities</p>
                </div>
              </div>

<div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">Instant Notification Alerts</span>
                  <p class="text-sm text-gray-600">Real-time alerts via email and Slack integration</p>
                </div>
              </div>

<div class="flex items-start">
                <svg class="flex-shrink-0 w-6 h-6 mr-3 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <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"></path>
                </svg>
                <div>
                  <span class="font-semibold text-gray-800">Dedicated Email Support</span>
                  <p class="text-sm text-gray-600">Priority support to help you succeed</p>
                </div>
              </div>
            </div>

<div class="text-center">
              <a href="#"
                class="block w-full px-8 py-4 text-lg font-semibold text-white transition duration-300 ease-in-out bg-red-500 rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 shadow-lg hover:shadow-xl transform hover:scale-105">
                Start Your Free Trial
              </a>
              <p class="mt-3 text-sm text-gray-500">No credit card required • Cancel anytime</p>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="mt-12 text-center fade-in" style="animation-delay: 0.5s;">
      <div class="inline-flex items-center px-6 py-3 bg-white rounded-full shadow-md">
        <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd"
            d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
            clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium text-gray-700">Trusted by 1000+ businesses</span>
      </div>
    </div>
  </div>
</div>

Related Examples

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

Author:
Christian Ahlin

8 months ago

1.5k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

4 months ago

711
Simple yet stylish pricing table

Author:
Laurits

2 years ago

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

2 months ago

235
Pricing cards in pair

Author:
Nour Haider

2 years ago

13.3k
Product card

Author:
Anum Shahana

8 months ago

1.1k
Basic pricing card

Author:
Sienna

2 years ago

10.5k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

7 months ago

1.2k
Pricing Card with Toggle

Author:
Paul Intay

8 months ago

911
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

825
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

1 year ago

8.3k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components