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

carde avec effet apple
carde avec effet apple

Omer fils ELENGA

4 months ago

662
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.

Hamza Atig

1 year ago

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

Anonymous

2 years ago

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

Christian Ahlin

1 year ago

2.9k
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

7 months ago

884
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Pricing table

Laurits

3 years ago

11.2k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Juan D. Cortorreal

10 months ago

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

EliteAI Tools

1 year ago

1.9k
Pricing cards

Freja Jensen

3 years ago

10.7k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k