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.2k

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
Price
Pricing

Author:
Jean Claude Nguetta

1 month ago

49
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

6 months ago

648
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Rajesh Maheshwari

9 months ago

861
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.6k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

1 year ago

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

Author:
Paul Intay

1 year ago

2.8k
PLAN SECTION

Author:
ABDO-SY

7 months ago

884
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

7 months ago

999
Pricing card

Author:
Sophia Baker

3 years ago

8.6k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components