Home
Dika Rahman
Pricing card single

Pricing card single

Horizontal pricing card

This tailwind example is contributed by Dika Rahman, on 28-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Dika Rahman

2.3k

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 h-screen">
  <div class="relative pt-8">
    <div class="absolute inset-0 h-1/2 bg-gray-100 dark:bg-gray-700"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">
        <div class="flex-1 bg-white dark:bg-gray-900 px-6 py-8 lg:p-12">
          <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white sm:text-3xl">Exclusive Offer</h3>
          <p class="mt-6 text-base text-gray-500 dark:text-gray-300">Limited time offer: Get access to our premium service with exclusive
            features. This package includes access to both our web and mobile applications. Take advantage of this offer
            now and enjoy lifetime benefits.</p>
          <div class="mt-8">
            <div class="flex items-center">
              <h4 class="flex-shrink-0 pr-4 bg-white dark:bg-gray-900 text-sm tracking-wider font-semibold uppercase text-rose-600">
                What's included</h4>
              <div class="flex-1 border-t-2 border-gray-200 dark:border-gray-600"></div>
            </div>
            <ul role="list" class="mt-8 space-y-5 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5">
              <li class="flex items-start lg:col-span-1">
                <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400 dark:text-green-500" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"></path>
                  </svg></div>
                <p class="ml-3 text-sm text-gray-700 dark:text-gray-300">Access to premium features</p>
              </li>
              <li class="flex items-start lg:col-span-1">
                <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400 dark:text-green-500" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"></path>
                  </svg></div>
                <p class="ml-3 text-sm text-gray-700 dark:text-gray-300">Mobile and web access</p>
              </li>
              <li class="flex items-start lg:col-span-1">
                <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400 dark:text-green-500" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"></path>
                  </svg></div>
                <p class="ml-3 text-sm text-gray-700 dark:text-gray-300">Lifetime access with no additional costs</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="py-8 px-6 text-center bg-gray-50 dark:bg-gray-900 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12">
          <p class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Limited Time Offer</p>
          <div class="">
            <span style="opacity:0.5" class="font-mono text-xl md:text-lg font-medium text-gray-400 dark:text-gray-400">$</span>
            <span style="opacity:0.5" class="h1 line-through text-gray-600 dark:text-gray-400">199.99</span><span class="line-through relative text-gray-600 dark:text-gray-400 text-center text-sm mb-4">/mo</span>
            <span class="text-red-600 text-sm">Special promotion</span>
          </div>
          <div class="mt-4 flex items-center justify-center text-5xl font-extrabold text-gray-900 dark:text-white"><span>$99.99</span>
            <span class="ml-3 text-xl font-medium text-gray-500 dark:text-gray-400">USD</span>
          </div>
          <div class="mt-6">
            <div class="rounded-md shadow"><a href="https://example.com/checkout"
                class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600">Get
                Exclusive Access</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing section

Author:
Leon Bachmann

2 years ago

11.6k
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.8k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

3 weeks ago

57
Pricing cards in pair

Author:
Anonymous

1 year ago

7.1k
3 pricing cards

Author:
Laurits

2 years ago

13.8k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

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

Author:
Andreas Wagner

1 year ago

13.1k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

3 weeks ago

42
Pricing table

Author:
Laurits

2 years ago

10.1k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

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

Author:
EliteAI Tools

6 months ago

552
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

2 months ago

365

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components