Home
Amit Pachange
multiple pricing cards

multiple pricing cards

Forked from> @amit/pricing-card-10

basic pricing card with single price

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

Card Pricing

Author Amit Pachange

11.4k

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.

Author:
Computer guy

1 year ago

7.4k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

21k
Pricing section with tailwind css

Author:
Task Master

2 years ago

10.3k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

10.6k
Pricing Table

Author:
Akshay

2 years ago

9.8k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

9.6k
Pricing card
Reveal details on hover

Author:
Anonymous

10 months ago

2.4k
Card
Card

Author:
Aman kumar

7 months ago

1.6k
Card
Card

Author:
Aman kumar

7 months ago

799
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

6 months ago

972
Product card

Author:
Anum Shahana

2 months ago

412
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.

Author:
SHARIFUL ISLAM

2 weeks ago

211

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components