Card

This tailwind example is contributed by Aman kumar, on 28-Jun-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Card Pricing

Author Aman kumar

Tailwind v3.4 2.2k 7

Fork Fullscreen

<div class="overflow-hidden relative w-56 h-64 bg-sky-600 rounded-2xl text-gray-50 flex flex-col justify-end items-center gap-2">
  <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="absolute opacity-30 -rotate-12 -bottom-12 -right-12 w-40 h-40 stroke-current">
    <path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M65.8,46.1V30.3a15.8,15.8,0,1,0-31.6,0V46.1M22.4,38.2H77.6l4,47.3H18.4Z" class="svg-stroke-primary">
    </path>
  </svg>
  <div class="flex flex-col items-center">
    <p class="text-xl font-extrabold">Discount</p>
    <p class="relative text-xs inline-block after:absolute after:content-[''] after:ml-2 after:top-1/2 after:bg-gray-200 after:w-12 after:h-0.5   before:absolute before:content-[''] before:-ml-14 before:top-1/2 before:bg-gray-200 before:w-12 before:h-0.5">Up to</p>
  </div>
  <span class="font-extrabold text-7xl -skew-x-12 -skew-y-12 -mt-1 mb-5">70%</span>
  <button class="z-10 duration-500 font-bold px-4 py-2 bg-gray-50 text-sky-500 hover:bg-sky-500 hover:text-gray-50">Shop now</button>
  <p class="text-xs mb-1">*Variable prices</p>
</div>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Card
Card

Aman kumar

2 years ago

3k
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
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
PLAN SECTION

ABDO-SY

1 year ago

1.7k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k