Home
Anonymous
Pricing card

Pricing card

Reveal details on hover

This tailwind example is contributed by Anonymous, on 01-Apr-2024. 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 Anonymous

2.9k

Fork Fullscreen

<div class="relative h-96 max-w-sm mx-auto mt-20 px-5 py-8 group rounded-3xl bg-gray-200 overflow-hidden shadow-xl">
    <img src="https://assets.revolut.com/media/plans-tiles/Cards-Tiles-Standard.png" alt="" class="absolute w-full h-full inset-0 object-cover">
    <div
        class="absolute inset-0 w-full h-full rounded-3xl bg-black bg-opacity-0 transition duration-500 backdrop-filter group-hover:bg-opacity-20 group-hover:backdrop-blur">
    </div>
    <div class="absolute inset-x-5 text-white">
        <h2 class="text-4xl font-semibold mb-2">Standart</h2>
        <p class="text-sm font-medium uppercase tracking-wider mb-6">Free</p>
        <p class="hidden group-hover:block">Whether you're looking to save money spending abroad or sticking to
            your
            budget with our built-in budgeting, get more from your money with our Standard account.</p>
    </div>
    <button class="absolute inset-x-5 bottom-8 py-3 rounded-2xl font-semibold bg-white shadow-lg hidden transition duration-200 hover:bg-gray-300 group-hover:block">Learn more</button>
</div>

Related Examples

Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

1 year ago

3k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.8k
Blog Card

Author:
Md. Tofayel islam

5 months ago

661
Pricing card

Author:
Piet Vriend

2 years ago

8.2k
Fancy pricing card

Author:
Laurits

2 years ago

12.6k
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.7k
Simple Review Card

Author:
Ranit Saha

4 weeks ago

109
google ui cards
google ui cards

Author:
Anonymous

1 year ago

9k
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

10 months ago

1.8k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Author:
Maxim

5 months ago

727
cards
cards with background animation

Author:
Anonymous

11 months ago

2.1k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components