multiple pricing cards

basic pricing card with single price

This tailwind example is contributed by Amit Pachange, on 18-Jul-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Card Pricing

Author Amit Pachange

Tailwind v3.4 13.2k 16

Fork Fullscreen

<div class="w-screen h-full dark:bg-gray-700">
  <div class="flex justify-center flex-wrap">
    <div class="border w-full max-w-sm md:w-1/2 lg:w-1/3 mx-3 rounded-lg shadow-lg mt-5 dark:shadow-blue-900">
      <div class="flex flex-col items-center md:items-start px-6 py-4">
        <div class="flex flex-col w-24">
          <h2 class="font-bold text-xl dark:text-gray-100">Basic Plan</h2>
          <div class="border-2 border-blue-500 mb-3 text"></div>
        </div>
        <div class="text-gray-500 dark:text-gray-200 text-center md:text-start">
          <p>In this plan you will get</p>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
          </ul>
        </div>
      </div>

<div class="flex flex-col items-center md:items-start bg-gray-100 px-6 py-3 rounded-lg dark:bg-blue-100">
        <h2 class="font-bold text-2xl mb-2">$9.99/mo</h2>
        <p class="text-gray-600 dark:text-gray-600">Access to basic features</p>
        <button class="bg-blue-600 px-4 py-2 mt-3 rounded font-semibold text-white hover:bg-blue-700">Subscribe</button>
      </div>
    </div>
    <div class="border w-full max-w-sm md:w-1/2 lg:w-1/3 mx-3 rounded-lg shadow-lg mt-5 dark:shadow-blue-900">
      <div class="flex flex-col items-center md:items-start px-6 py-4">
        <div class="flex flex-col w-24">
          <h2 class="font-bold text-xl dark:text-gray-100">Basic Plan</h2>
          <div class="border-2 border-blue-500 mb-3 text"></div>
        </div>
        <div class="text-gray-500 dark:text-gray-200 text-center md:text-start">
          <p>In this plan you will get</p>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
          </ul>
        </div>
      </div>

</div>
</div>

Related Examples

Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Computer guy

2 years ago

9.2k
Pricing section with tailwind css

Task Master

3 years ago

12.1k
Tailwind image card with text above it

I.P. Leroy

3 years ago

26.5k
Info cards for admin panel

Sophia Baker

3 years ago

12.8k
Pricing Table

Akshay

4 years ago

11.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Card
Card

Aman kumar

2 years ago

3k
Card
Card

Aman kumar

2 years ago

2.2k
HighLight
Highlight section. Find it makecomponents.com

makecomponents

2 years ago

2.5k
Product card

Anum Shahana

1 year ago

1.9k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k