Card

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

Card Pricing

Author Aman kumar

749

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

Author:
Akshay

2 years ago

9.6k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

9.5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

11.2k
Pricing card
Reveal details on hover

Author:
Anonymous

9 months ago

2.3k
Card
Card

Author:
Aman kumar

6 months ago

1.4k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

5 months ago

696
Product card

Author:
Anum Shahana

1 month ago

220
Watch Card
Watch Cards

Author:
Anonymous

3 months ago

731
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

2 years ago

11.8k
Simple Card section

Author:
Akram Khan

6 months ago

1.3k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

17.3k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components