Home
Anonymous
Horizontal pricing card

Horizontal pricing card

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

Pricing

Author Anonymous

185

Fork Fullscreen

<div class="relative flex flex-col md:flex-row items-center md:items-stretch bg-white border-2 border-orange-400 rounded-lg shadow-lg">
    <div class="md:w-1/4 p-6 flex items-center justify-center">
        <div class="text-center">
          <div class="absolute z-10 px-3 py-1 text-xs font-bold transform bg-white border rounded-full shadow-md text-primary-600 border-primary-500 -top-3 -right-3 rotate-12 md:static md:transform-none md:top-auto md:right-auto md:rotate-0 md:mb-2">
              <span>30</span> days boost
          </div>
            <span class="flex items-center gap-1 px-4 py-1 text-sm font-medium text-white rounded-full bg-gradient-to-r from-orange-600 to-red-600 justify-center">
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                </svg>           Ultra Visibility
            </span>
            <h3 class="text-2xl font-semibold text-gray-900 mt-2">Ultimate</h3>
            <p class="mt-2 text-gray-600">Maximum exposure + social media</p>
            <div class="mt-4">
                <span class="text-4xl font-bold">$99</span>
                <span class="ml-2 text-gray-600">one-time</span>
            </div>
        </div>
    </div>

<div class="md:w-1/2 p-6 border-t md:border-t-0 md:border-l border-gray-200">
        <ul class="mt-2 space-y-3">
            <li class="flex items-center gap-2">
                <svg class="shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                </svg>
                <span>Listed within 12 working hours</span>
            </li>
            <li class="flex items-center gap-2">
                <svg class="shrink-0  h-5 w-5 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                </svg>
                <span>Home Page Visibility (Just Launched + Featured Tool section)</span>
            </li>
            <li class="flex items-center gap-2">
                <svg class="shrink-0 h-5 w-5 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                </svg>
                <span>
                    <strong>30 days</strong> in the featured section
                    <span class="relative inline-block group">
                        <span class="cursor-help">
                            throughout the website
                            <svg class="inline-block h-4 w-4 text-gray-500 ml-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"></path>
                            </svg>
                        </span>
                        <div class="absolute z-10 invisible w-64 p-2 mt-2 text-sm text-white transition-opacity duration-300 -translate-x-1/2 bg-black rounded opacity-0 group-hover:visible group-hover:opacity-100 left-1/2 bottom-full">
                            <div class="flex flex-col gap-1">
                                <div>Sample pages where your tool will be featured:</div>
                                <a href="https://eliteai.tools#featured-tools" class="text-primary-300 hover:underline">Homepage</a>
                                <a href="https://eliteai.tools/category/headshot#featured-tools" class="text-primary-300 hover:underline">Category pages</a>
                                <a href="https://eliteai.tools/tag/professional-photos#featured-tools" class="text-primary-300 hover:underline">Tag pages</a>
                                <a href="https://eliteai.tools/blog/best-ai-tools-for-presentations#featured-tools" class="text-primary-300 hover:underline">Blog posts</a>
                                <a href="https://eliteai.tools/tool/slidespilot/alternatives#featured-tools" class="text-primary-300 hover:underline">Alternative pages</a>
                                <div>Note: The Featured Section is positioned as sticky to maximize exposure for your tool.</div>
                            </div>
                            <div class="absolute w-2 h-2 rotate-45 -translate-x-1/2 bg-black left-1/2 -bottom-1"></div>
                        </div>
                    </span>
                </span>
            </li>
            <li class="flex items-center gap-2">
                <svg class="shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
                </svg>
                <span>
                    <span class="relative inline-block group">
                        <span class="cursor-help">
                            Top spot on tag pages
                            <svg class="inline-block h-4 w-4 text-gray-500 ml-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"></path>
                            </svg>
                        </span>
                        <div class="absolute z-10 invisible w-64 p-2 mt-2 text-sm text-white transition-opacity duration-300 -translate-x-1/2 bg-black rounded opacity-0 group-hover:visible group-hover:opacity-100 left-1/2 bottom-full">
                            <div class="flex flex-col gap-1">
                                <div>
                                    Your tool will occupy top spots in the tags associated with it.
                                   <br> Here's a sample tag page where your tool will be given top priority:
                                </div>
                                <a href="https://eliteai.tools/tag/headshots" class="text-primary-300 hover:underline">Best headshots AI tools</a>
                             </div>
                            <div class="absolute w-2 h-2 rotate-45 -translate-x-1/2 bg-black left-1/2 -bottom-1"></div>
                        </div>
                    </span>
                </span>
            </li>
             <li class="flex items-center gap-2">
                <svg class="shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
                </svg>
                <span>
                   Social Media Promotion
                </span>
            </li>
        </ul>
    </div>

<div class="md:w-1/4 p-6 border-t md:border-t-0 md:border-l border-gray-200 flex items-center justify-center">
        <button data-listing-plan-name="ultimate" class="block w-full px-6 py-3 font-medium text-center text-white transition-colors rounded-lg openModalButton bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700">
            Get Ultimate Visibility
            <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
            </svg>
        </button>
    </div>
</div>

Related Examples

Clean pricing cards

Author:
Freja Jensen

2 years ago

7.8k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.2k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

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

2 months ago

526
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

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

Author:
Paul Intay

1 year ago

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

5 months ago

852
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

1 month ago

57
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

4 weeks ago

141
Pricing cards in pair

Author:
Anonymous

1 year ago

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

Author:
Anonymous

1 year ago

6.1k
Pricing section with tailwind css

Author:
Task Master

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components