Horizontal Pricing Card

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

Pricing

Author Mereani Waqa

Tailwind v3.4 6.2k 10

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

Task Master

3 years ago

12k
Service Pricing Card
Cards including a call-to-action button for signing up

Paul Intay

2 years ago

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

Leon Bachmann

3 years ago

12k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
Pricing Plans
Js integrated Pricing Plans

ORGIN_DREAMS

1 year ago

1.4k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

3.7k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

1.1k
Pricing Card

Amit Pachange

3 years ago

13.9k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Ahmath S.

1 year ago

1.1k
Modern pricing cards
Minimal and clean pricing cards

Paul Intay

1 year ago

1.8k