Back to Discover
Tailwind CSS Profile Card with Hover Effect

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">

  <div x-data="{ isHovered: false }" 
       @mouseenter="isHovered = true" 
       @mouseleave="isHovered = false"
       class="relative bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-2 w-full max-w-sm">

    <!-- Background gradient -->
    <div class="h-32 bg-gradient-to-r from-blue-500 to-purple-600"></div>

    <!-- Profile content -->
    <div class="relative px-6 pb-6">
      <!-- Avatar -->
      <div class="flex justify-center -mt-16 mb-4">
        <div class="relative">
          <img src="https://ui-avatars.com/api/?name=Sarah+Johnson&size=128&background=3b82f6&color=fff&bold=true" 
               alt="Profile" 
               class="w-32 h-32 rounded-full border-4 border-white shadow-lg transition-transform duration-300"
               :class="{ 'scale-110': isHovered }">
          <div class="absolute bottom-2 right-2 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
        </div>
      </div>

      <!-- Info -->
      <div class="text-center mb-4">
        <h2 class="text-2xl font-bold text-gray-800 mb-1">Sarah Johnson</h2>
        <p class="text-gray-500 text-sm mb-2">Senior Product Designer</p>
        <p class="text-gray-600 text-sm px-4">Passionate about creating intuitive user experiences and beautiful interfaces.</p>
      </div>

      <!-- Stats -->
      <div class="flex justify-around py-4 border-t border-b border-gray-200 mb-4">
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">248</p>
          <p class="text-xs text-gray-500">Projects</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">12.5K</p>
          <p class="text-xs text-gray-500">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">1.8K</p>
          <p class="text-xs text-gray-500">Following</p>
        </div>
      </div>

      <!-- Social links -->
      <div class="flex justify-center gap-4 mb-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-200">
          <ion-icon name="logo-twitter" class="text-2xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-600 hover:text-blue-700 transition-colors duration-200">
          <ion-icon name="logo-linkedin" class="text-2xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-600 hover:text-gray-800 transition-colors duration-200">
          <ion-icon name="logo-github" class="text-2xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-600 hover:text-pink-600 transition-colors duration-200">
          <ion-icon name="logo-dribbble" class="text-2xl"></ion-icon>
        </a>
      </div>

      <!-- Action buttons -->
      <div class="flex gap-3">
        <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2">
          <ion-icon name="person-add-outline"></ion-icon>
          Follow
        </button>
        <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2">
          <ion-icon name="mail-outline"></ion-icon>
          Message
        </button>
      </div>
    </div>

    <!-- Hover overlay effect -->
    <div class="absolute inset-0 bg-gradient-to-t from-blue-600/10 to-transparent opacity-0 transition-opacity duration-300 pointer-events-none"
         :class="{ 'opacity-100': isHovered }">
    </div>
  </div>
Comments (0)

No comments yet. Be the first!