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

1.8k

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