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.4k
Pricing card with CTA

Author:
Laurits

3 years ago

10k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

2 months ago

162
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

2 years ago

3.8k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

11 months ago

1.5k
Basic pricing card

Author:
Sienna

3 years ago

11k
Pricing cards for 3 plans

Author:
Laurits

3 years ago

9.7k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

8 months ago

767
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
Pricing Card

Author:
Amit Pachange

3 years ago

13.4k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

4 months ago

168

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components