Home
Samuel Dawson
Hover effect card

Hover effect card

This tailwind example is contributed by Samuel Dawson, on 29-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Samuel Dawson

22.4k

Fork Fullscreen

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
    <div
        class="group relative cursor-pointer overflow-hidden bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl sm:mx-auto sm:max-w-sm sm:rounded-lg sm:px-10">
        <span class="absolute top-10 z-0 h-20 w-20 rounded-full bg-sky-500 transition-all duration-300 group-hover:scale-[10]"></span>
        <div class="relative z-10 mx-auto max-w-md">
            <span class="grid h-20 w-20 place-items-center rounded-full bg-sky-500 transition-all duration-300 group-hover:bg-sky-400">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-10 w-10 text-white transition-all">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                </svg>
            </span>
            <div
                class="space-y-6 pt-5 text-base leading-7 text-gray-600 transition-all duration-300 group-hover:text-white/90">
                <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share
                    online.</p>
            </div>
            <div class="pt-5 text-base font-semibold leading-7">
                <p>
                    <a href="#" class="text-sky-500 transition-all duration-300 group-hover:text-white">Read the docs
                        &rarr;
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

Related Examples

Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

17.1k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

1 year ago

17.5k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

11.7k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

41k
Image card with overlay text overlay

Author:
Santos78

1 year ago

24.5k
Card grid for posts

Author:
Mr Robot

1 year ago

16.1k
User profile card with Cover Image

Author:
Noob

1 year ago

21.1k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

51.5k
Tailwind card

Author:
Conan Hilton

1 year ago

10.5k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

1 year ago

7.7k
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

1 year ago

15.4k
Group hover card
article card

Author:
Sienna

1 year ago

9.7k
Product card

Author:
Oliver Hansen

1 year ago

11.1k
Image card

Author:
Laurits

1 year ago

13.2k
Info Card
info card with description

Author:
Prashant

2 years ago

10.2k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

1 year ago

14.1k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

1 year ago

11.5k
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent