Home
ReddRadar.com
Horiizontal Pricing Card

Horiizontal Pricing Card

Single pricing plan section

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

Pricing

Author ReddRadar.com

538

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-6xl 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 lg:flex lg:items-start lg:space-x-8">
                        <div class="mb-8 text-center lg:w-2/5 lg:text-left lg:mb-0">
                            <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 lg:justify-start">
                                <span class="text-5xl font-extrabold text-gray-800">$7</span>
                                <span class="ml-2 text-gray-500">/month</span>
                            </div>

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

<a href="https://reddradar.com/auth/login?redirect_to=https%3A%2F%2Freddradar.com%2Fpayments%2Fpdt_2YnpTARifwkVpT9LgOjin%2Fredirect"
                                class="block w-full px-8 py-4 text-lg font-semibold text-white transition duration-300 ease-in-out transform bg-red-500 rounded-lg shadow-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 hover:shadow-xl hover:scale-105">
                                Start Your Free Trial
                            </a>
                            <p class="mt-3 text-sm text-gray-500">
                                Cancel anytime
                                </p>
                        </div>

<div class="lg:w-3/5">
                            <h4 class="hidden mb-6 text-xl font-semibold text-gray-800 lg:block">What's Included:</h4>
                            <div class="space-y-4">
                                <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
                                            need</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>
                    </div>
                </div>
            </div>
        </div>

</div>
</div>

Related Examples

Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.9k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

5 months ago

501
Pricing Table

Author:
Akshay

3 years ago

10.8k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

12.5k
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.

1 month ago

338
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.5k
Basic pricing card

Author:
Sienna

2 years ago

10.6k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.6k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

10.9k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

549
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

6 months ago

644
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components