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

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

2 years ago

10.9k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

1 year ago

2.4k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

8 months ago

810
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 months ago

621
Pricing cards

Author:
Freja Jensen

2 years ago

9.8k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

8 months ago

1.5k
Payment form

Author:
ORGIN_DREAMS

3 months ago

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

Author:
Hamza Atig

4 months ago

462
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

8 months ago

663
PLAN SECTION

Author:
ABDO-SY

4 months ago

570
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

3 months ago

320

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components