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

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
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

9 months ago

603
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

3 years ago

11k
Simple pricing cards

Author:
S. Patel

2 years ago

11.1k
Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
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
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

11 months ago

986
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

1 year ago

1k
Pricing Plans

Author:
ariaw

4 months ago

508

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components