Home
Anonymous
Pricing cards in pair

Pricing cards in pair

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

Pricing

Author Anonymous

Fork Fullscreen

<div class="max-w-screen-lg mx-auto p-4">
  <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
    
    <div class="bg-white shadow-lg rounded-lg p-6">
      <h2 class="text-2xl font-semibold text-gray-800">Basic Plan</h2>
      <p class="text-gray-600">Perfect for starters</p>
      <div class="mt-4">
        <span class="text-4xl font-bold text-indigo-500">$9</span>
        <span class="text-gray-600">/month</span>
      </div>
      <ul class="mt-4 space-y-2">
        <li class="flex items-center">
          <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700">Feature 1</span>
        </li>
        <li class="flex items-center">
          <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700">Feature 2</span>
        </li>
      </ul>
      <a href="#" class="block mt-6 text-center text-white bg-indigo-500 hover:bg-indigo-600 py-2 rounded-full">Choose Plan</a>
    </div>

<div class="bg-white shadow-lg rounded-lg p-6">
      <h2 class="text-2xl font-semibold text-gray-800">Pro Plan</h2>
      <p class="text-gray-600">For advanced users</p>
      <div class="mt-4">
        <span class="text-4xl font-bold text-green-500">$19</span>
        <span class="text-gray-600">/month</span>
      </div>
      <ul class="mt-4 space-y-2">
        <li class="flex items-center">
          <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700">Feature 1</span>
        </li>
        <li class="flex items-center">
          <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700">Feature 2</span>
        </li>
        <li class="flex items-center">
          <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700">Feature 3</span>
        </li>
      </ul>
      <a href="#" class="block mt-6 text-center text-white bg-green-500 hover:bg-green-600 py-2 rounded-full">Choose Plan</a>
    </div>
  </div>
</div>

Related Examples

Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

13.1k
Pricing table

Author:
Laurits

2 years ago

9.8k
Card
Card

Author:
Aman kumar

9 months ago

908
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.2k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

3.8k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

2 months ago

581
Pricing Card

Author:
Amit Pachange

2 years ago

12.9k
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

5 days ago

23
Basic pricing card

Author:
Sienna

2 years ago

11k
Pricing cards

Author:
Freja Jensen

2 years ago

9.1k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

4 months ago

632
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components