Home
Mereani Waqa
Horizontal Pricing Card

Horizontal Pricing Card

This tailwind example is contributed by Mereani Waqa, on 15-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Mereani Waqa

5.6k

Fork Fullscreen

<div class="mx-auto mt-8 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-12 lg:mx-0 lg:flex lg:max-w-none">
    <div class="p-8 sm:p-10 lg:flex-auto">
      <h1 class="text-2xl font-bold tracking-tight text-gray-900">Monthly Pricing</h1>
      <p class="mt-6 text-base leading-7 text-gray-600">Choose our monthly subscription plan that would suit your extra
        needs. Cancel anytime. Custom enterprise pricing is available upon request. <a href="/contact"
          class="text-blue-500 underline underline-offset-4">Just email us here!</a></p>
      <div class="mt-10 flex items-center gap-x-4">
        <h4 class="flex-none text-sm font-semibold leading-6 text-blue-600">What’s included</h4>
        <div class="h-px flex-auto bg-gray-100"></div>
      </div>
      <ul class="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 sm:grid-cols-2 sm:gap-6">
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
            viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
            id="IconChangeColor">
            <defs>
              <clipPath id="id1">
                <path
                  d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                  clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
              </clipPath>
            </defs>
            <g clip-path="url(#id1)">
              <path fill="green"
                d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
            </g>
          </svg> <span class="font-bold mx-1">1000</span><span>Resumes / Check</span></li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
            viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
            id="IconChangeColor">
            <defs>
              <clipPath id="id1">
                <path
                  d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                  clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
              </clipPath>
            </defs>
            <g clip-path="url(#id1)">
              <path fill="green"
                d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
            </g>
          </svg> <span class="font-bold mx-1">30</span><span>Job Posts</span></li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
            viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
            id="IconChangeColor">
            <defs>
              <clipPath id="id1">
                <path
                  d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                  clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
              </clipPath>
            </defs>
            <g clip-path="url(#id1)">
              <path fill="green"
                d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
            </g>
          </svg> <span class="font-bold mx-1">24/7</span><span>Priority Support</span></li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
            viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
            id="IconChangeColor">
            <defs>
              <clipPath id="id1">
                <path
                  d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                  clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
              </clipPath>
            </defs>
            <g clip-path="url(#id1)">
              <path fill="green"
                d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
            </g>
          </svg> <span class="font-bold mx-1"></span><span>Custom Hosting</span></li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
            viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
            id="IconChangeColor">
            <defs>
              <clipPath id="id1">
                <path
                  d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                  clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
              </clipPath>
            </defs>
            <g clip-path="url(#id1)">
              <path fill="green"
                d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
            </g>
          </svg> <span class="font-bold mx-1"></span><span>White Label Access</span></li>
      </ul>
    </div>
    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
      <div
        class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
        <div class="mx-auto max-w-xs px-8">
          <p class="text-base font-semibold text-gray-600">Monthly</p>
          <p class="mt-6 mb-12 flex items-baseline justify-center gap-x-2">
            <span class="text-5xl font-bold tracking-tight text-gray-900 "><span class="line-through px-2">$29</span><span class="italic text-gray-700">FREE*</span></span>
            <span class="text-sm font-semibold leading-6 tracking-wide text-gray-600">USD</span>
          </p><a href="/signup" class="bg-blue-600 text-white rounded-sm py-2 w-full block my-6">Get Started →</a>
          <p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

Related Examples

Pricing card for subscription

Author:
Task Master

3 years ago

11.3k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

3 months ago

418
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.3k
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

2.5k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.8k
Card template

Author:
Raul antonio de la cruz hernandez

1 week ago

16
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

1 month ago

147
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

2.4k
Pricing Card

Author:
Amit Pachange

2 years ago

13.3k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components