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

1.9k

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

Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

11 months ago

1.2k
credit card checkout

Author:
Antony

2 years ago

3.7k
Simple card layout with image

Author:
Leon Bachmann

3 years ago

11.1k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

1 year ago

1.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.8k
Horizontal card with image

Author:
Amit Pachange

3 years ago

15.3k
Hover Card

Author:
Maxim

1 year ago

2.9k
beautifull project page

Author:
Akram Khan

1 year ago

2.4k
Pricing card with CTA

Author:
Laurits

3 years ago

10.1k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

1 year ago

1.4k
Simple Card with Image
Horizontal card

Author:
Prem..

3 years ago

9.7k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components