Horizontal pricing card

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

Pricing

Author Anonymous

Tailwind v3.4 1.5k 4

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

Fancy pricing card

Laurits

3 years ago

14.6k
Clean pricing cards

Santiago Hernandez

2 years ago

3.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

Rathanak Phan

1 year ago

2.8k
PLAN SECTION

ABDO-SY

1 year ago

1.7k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

1k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

1k
Price
Pricing

Jean Claude Nguetta

11 months ago

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

Paul Intay

2 years ago

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

Elsabe Fourie

2 years ago

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

Hamza Atig

1 year ago

1.7k
Pricing Card with Toggle

Paul Intay

1 year ago

1.3k