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

7.5k

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

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

9 months ago

708
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

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

Author:
Elsabe Fourie

2 years ago

11.6k
3 pricing cards

Author:
Laurits

3 years ago

14.7k
Pricing Card

Author:
Amit Pachange

3 years ago

13.4k
Pricing card

Author:
Laurits

3 years ago

11k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

1 month ago

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

Author:
Rajesh Maheshwari

10 months ago

979
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

2 months ago

247
Pricing Plans

Author:
ariaw

4 months ago

479
Pricing card for subscription

Author:
Task Master

3 years ago

11.3k
Basic pricing card

Author:
Sienna

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components