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

Basic pricing card

Author:
Sienna

3 years ago

11k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.7k
Minimal pricing card design

Author:
Anonymous

2 years ago

7.5k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

652
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
Basic pricing card

Author:
Sienna

3 years ago

11.7k
Pricing cards pair

Author:
Samuel Dawson

3 years ago

11k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

9 months ago

767
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

7k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Une structure simple et transparente. pricing
Une structure simple et transparente. pricing

Author:
Omer fils ELENGA

2 weeks ago

8
Ticket Options ios 26
Ticket Options ios 26

Author:
Omer fils ELENGA

3 months ago

199

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components