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

691

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

3 pricing cards

Author:
Laurits

2 years ago

14.3k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.5k
Pricing cards in pair

Author:
Anonymous

2 years ago

7.3k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 months ago

885
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

8 months ago

1.2k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

2 years ago

8.2k
Pricing section

Author:
Leon Bachmann

2 years ago

12.2k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

2 years ago

12.8k
Basic pricing card

Author:
Sienna

2 years ago

11.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

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

Author:
bara masalma

10 months ago

990
Pricing Card with Toggle

Author:
Paul Intay

10 months ago

924

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components