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

3.1k

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

Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.6k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

5 months ago

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

Author:
Rajesh Maheshwari

8 months ago

769
Pricing Plans

Author:
ariaw

2 months ago

197
PLAN SECTION

Author:
ABDO-SY

7 months ago

793
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

6 months ago

650
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

6 months ago

1k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.7k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.7k
Clean pricing cards

Author:
Freja Jensen

2 years ago

8.1k
Basic pricing block

Author:
Leon Bachmann

2 years ago

7.2k
Simple pricing cards

Author:
S. Patel

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components