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

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

Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

2 years ago

9.5k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

3 years ago

11.1k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

9 months ago

687
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

4 days ago

58
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.3k
Basic pricing card

Author:
Sienna

3 years ago

11.6k
Card
Card

Author:
Aman kumar

1 year ago

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

Author:
Computer guy

2 years ago

8.3k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

231
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components