DocsAllOver Hover Effect Card Component in Tailwind Snippets

Hover Effect Card Component in Tailwind

Oct. 17, 2024

Tailwind, Card, Clean UI, Animation

Full Screen

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <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>
</body>
</html>

/* Doesn't require any CSS. */

//Doesn't require any JS.

This Tailwind CSS snippet provides a visually appealing and interactive card component with customizable hover effects. The card can be used to display various types of content, such as product information, blog posts, or featured items. The hover effects add a dynamic element to the card, making it more engaging for users.

Key Features:

Responsive Design: The card component adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the card using Tailwind CSS utility classes to match your website's design and branding.
Hover Effects: The card includes visually appealing hover effects, such as changing background color, revealing hidden elements, or animating the card's contents.
Content Flexibility: The card can be used to display various types of content, including images, titles, descriptions, and call-to-action buttons.

Implementation:

Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the card component, including the container, card content, and any additional elements (images, titles, descriptions, buttons).
Apply Tailwind CSS Classes: Use Tailwind CSS utility classes to style the card component and its elements, such as card, card-image, card-title, card-body, card-hover, and any other relevant classes.
Customize Hover Effects: Apply appropriate Tailwind CSS classes or custom CSS rules to create the desired hover effects, such as changing background color, revealing hidden elements, or animating the card's contents.

Latest Snippets

View All