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

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

Horizontal pricing card

Author:
Anonymous

2 months ago

180
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

12.1k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

1 week ago

53
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

4 months ago

788
Pricing card

Author:
Task Master

2 years ago

8.6k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

2.2k
Basic pricing block

Author:
Leon Bachmann

2 years ago

6.8k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.3k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 days ago

39
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.1k
Card
Card

Author:
Aman kumar

11 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components