Interactive Profile Card with Smooth Hover Transitions Using TailwindCSS

Interactive Profile Card with Smooth Hover Transitions Using TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/9/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Interactive Profile Card with Smooth Hover Transitions Using TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body class="h-screen flex flex-col items-center justify-center bg-gray-900">
14
15    <div
16        class="bg-[#ffffff08] relative group backdrop-blur-lg shadow-lg w-64 max-h-16 px-4 pb-8 -rotate-[8deg] hover:pt-3 hover:rotate-0 hover:max-h-full cursor-pointer overflow-hidden text-center border border-[#ffffff25] rounded transition-all duration-700 hover:shadow-2xl">
17        <div
18            class="p-10 top-24 opacity-0 group-hover:opacity-80 left-10 bg-[#22ffe5] absolute -z-10 blur-2xl transition-opacity duration-500">
19        </div>
20        <div class="z-10">
21            <div class="flex flex-col items-center justify-center mt-[12px] w-full">
22                <div class="relative h-12 flex justify-center w-full">
23                    <i
24                        class="fa-solid absolute group-hover:block hidden fa-user p-1 px-[9px] text-xl group-hover:scale-[1.20] text-teal-300 border-2 border-teal-300 shadow-md rounded-full transition-all duration-500 group-hover:mt-2"></i>
25                    <p class="text-2xl absolute font-bold text-gray-200 group-hover:hidden transition-all duration-500">
26                        Hover Me!</p>
27                </div>
28                <div class="pt-3">
29                    <h2 class="text-2xl font-semibold text-gray-200 group-hover:scale-105 transition-all duration-500">
30                        John Doe</h2>
31                </div>
32            </div>
33
34            <p class="text-sm text-gray-300 pt-2 group-hover:opacity-100 opacity-0 transition-opacity duration-500">
35                Creative Designer & Developer. Passionate about building beautiful, interactive experiences.
36            </p>
37
38
39            <div
40                class="flex items-center justify-center gap-4 text-gray-200 text-lg pt-5 group-hover:opacity-100 opacity-0 transition-opacity duration-500">
41                <a class="hover:-translate-y-[3px] hover:text-teal-300 transition duration-300" href="#"><i
42                        class="fa-brands fa-facebook"></i></a>
43                <a class="hover:-translate-y-[3px] hover:text-teal-300 transition duration-300" href="#"><i
44                        class="fa-brands fa-instagram"></i></a>
45                <a class="hover:-translate-y-[3px] hover:text-teal-300 transition duration-300" href="#"><i
46                        class="fa-brands fa-twitter"></i></a>
47            </div>
48
49            <div class="pt-6">
50                <a href="#"
51                    class="bg-[#5eead5] text-black font-semibold py-[6px] px-4 text-xs rounded-full hover:bg-[#41cdb8] group-hover:opacity-100 opacity-0 transition-all duration-500">Contact
52                    Now <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
53            </div>
54        </div>
55    </div>
56
57</body>
58
59</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.