Hover effect card

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

Card

Author Samuel Dawson

Tailwind v3.4 33.3k 57

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

I.P. Leroy

3 years ago

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

Noob

4 years ago

24.9k
Feature cards with icons on top

Manon Daniel

3 years ago

18.3k
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.

Amit Pachange

4 years ago

53.8k
Image card with overlay text overlay

Santos78

3 years ago

33.1k
Card grid for posts

Mr Robot

3 years ago

24.2k
User profile card with Cover Image

Noob

4 years ago

33.9k
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:

Prashant

4 years ago

65.6k
Tailwind card

Conan Hilton

3 years ago

14.5k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

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

Gopi Yadav

3 years ago

22.3k
Group hover card
article card

Sienna

3 years ago

12.3k
Product card

Oliver Hansen

3 years ago

14.5k
Image card

Laurits

3 years ago

18.3k
Info Card
info card with description

Prashant

4 years ago

13.3k
Video card
Video card component for tailwind css

Rajesh kulkarni

3 years ago

18.3k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k