Pricing card single

Horizontal pricing card

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

Pricing

Author Dika Rahman

Tailwind v3.4 3.9k 8

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

tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

irahoza daniel

1 year ago

1.4k
Pricing card

Task Master

3 years ago

9.7k
Pricing card

Sophia Baker

3 years ago

8.8k
Une structure simple et transparente. pricing
Une structure simple et transparente. pricing

Omer fils ELENGA

7 months ago

484
Pricing Section
Our pricing plan section with 3 packages

Emdadul Islam

2 years ago

3.8k
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

9 months ago

742
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

3 years ago

10.9k
Pricing Table

Akshay

4 years ago

11.4k
AgriSmart
used in agriculture for making profit and good production

INGRIDE MUZIRANENGE

11 months ago

1.1k
Pricing Plans

ariaw

1 year ago

634
Pricing Card
A responsive pricing card build using html and tailwind css

Rajesh Maheshwari

1 year ago

1.5k