Open In App

How to Make Floating Card Effect in Tailwind CSS?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Floating card effect using Tailwind CSS is fun to make and explore. It is basically all about using the classes of Tailwind CSS to create cards when hovered upon have a floating effect, such that they are replaced from their position, either get transformed, or move up or down in their positions. we will learn how to make a floating card effect in Tailwind CSS.

Approach

  • After creating an index.html file add the boilerplate code to it.
  • Add the script tag shown above to configure your directory to use tailwind CSS classes.
  • Make the body element as a flexbox and center items.
  • Create 3 different classes using the div tag of HTML and within it, add a background, transform property to move towards the y-axis by -10px, ie., move upwards.
  • Add a heading in the box and also add a few list elements as a part of some content.
  • Replicate this one div three times and change the content.

Example: A webpage showcasing three interactive floating cards using Tailwind CSS, each card displaying content related to GeeksForGeeks DSA exercises, contests, and algorithms with hover effects.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <title>Floating Cards</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="bg-gray-100 flex items-center justify-center h-screen ">
    <div class="flex space-x-4">
        <div class="w-80 p-6 bg-blue-100 rounded-lg 
                    shadow-lg transition-transform duration-300
                    ease-in-out hover:translate-y-[-10px]
                    hover:shadow-xl hover:bg-blue-200">
            <h2 class="text-xl font-semibold mb-2">
                GeeksForGeeks DSA Exercises
            </h2>
            <ul class="list-disc list-inside">
                <li>Arrays</li>
                <li>Linked Lists</li>
                <li>Stacks</li>
            </ul>
        </div>
        <div class="w-80 p-6 bg-green-100 rounded-lg
                   shadow-lg transition-transform duration-300
                   ease-in-out hover:translate-y-[-10px]
                   hover:shadow-xl hover:bg-green-200">
            <h2 class="text-xl font-semibold mb-2">
                GFG Contests
            </h2>
            <ul class="list-disc list-inside">
                <li>Weekly Contests</li>
                <li>Monthly Contests</li>
                <li>Special Contests</li>
            </ul>
        </div>
        <div class="w-80 p-6 bg-yellow-100 
                    rounded-lg shadow-lg transition-transform
                    duration-300 ease-in-out hover:translate-y-[-10px]
                    hover:shadow-xl hover:bg-yellow-200">
            <h2 class="text-xl font-semibold mb-2">
                GFG Data Structures and Algorithms
            </h2>
            <ul class="list-disc list-inside">
                <li>Sorting</li>
                <li>Searching</li>
                <li>Graph Algorithms</li>
            </ul>
        </div>
    </div>
</body>

</html>

Output: On opening the server through live server, we get the following output:



Article Tags :

Similar Reads