Pricing Card with gradient background

A sleek and transparent card displaying your product's pricing.
It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

This tailwind example is contributed by Computer guy, on 21-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Computer guy

Tailwind v3.4 8.8k 8

Fork Fullscreen

<div class="relative text-gray-300" id="pricing">
  <div aria-hidden="true" class="absolute inset-0 h-max w-full m-auto grid grid-cols-2 -space-x-52 opacity-20">
    <div class="blur-[106px] h-56 bg-gradient-to-br to-purple-400 from-blue-700"></div>
    <div class="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-indigo-600"></div>
  </div>
  <div class="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
    <div class="mb-10 space-y-4 px-6 md:px-0">
      <h2 class="text-center text-2xl font-bold text-white sm:text-3xl md:text-4xl">Pricing</h2>
    </div>
    <div class="flex flex-col sm:flex-row justify-center gap-4">
      <div
        class="flex flex-col items-center aspect-auto p-4 sm:p-8 border rounded-3xl bg-gray-800 border-gray-700 shadow-gray-600/10 shadow-none m-2 flex-1 max-w-md">
        <h2 class="text-lg sm:text-xl font-medium text-white mb-2">Affordable Pricing</h2>
        <p class="text-lg sm:text-xl text-center mb-6 mt-4">
          <span class="text-3xl sm:text-4xl font-bold text-white">$199</span> / Month
        </p>
        <p class="text-center mb-6">Get access to all premium features for just $199 per month. No hidden fees or extra
          charges.</p>
        <a target="_blank" rel="noreferrer"
          class="relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          href="#contact"><span class="relative text-sm font-semibold text-black">Get Started</span></a>
      </div>
    </div>
  </div>
</div>

Related Examples

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

3 years ago

12.7k
Pricing cards in pair

Nour Haider

3 years ago

14.9k
"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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
payement cart virtual
payement cart virtual

Omer fils ELENGA

8 months ago

474
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2.1k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

115
Pricing cards

Freja Jensen

3 years ago

10.8k
Card template

Raul antonio de la cruz hernandez

10 months ago

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

Hamza Atig

1 year ago

1.7k
Pricing Card

Amit Pachange

3 years ago

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

INGRIDE MUZIRANENGE

1 year ago

1.1k