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

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

multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing cards
pricing section with 3 cards

Noob

4 years ago

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

Hamza Atig

1 year ago

1.6k
Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.5k
Pricing Card

Amit Pachange

3 years ago

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

Nicole Shalom

1 year ago

1.8k
Basic pricing card

Sienna

3 years ago

12.1k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

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

Hamza Atig

10 months ago

785
Pricing card

Piet Vriend

3 years ago

9.6k
Pricing Section
Our pricing plan section with 3 packages

Emdadul Islam

2 years ago

3.9k