Glassmorphism Social Card

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 p-4">
  <div class="relative w-full max-w-sm overflow-hidden rounded-xl shadow-lg backdrop-blur-md border border-white border-opacity-30 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 p-6 flex flex-col items-center text-center">
    <!-- Frosted Glass Effect -->
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-gray-700 dark:bg-opacity-10 pointer-events-none transform -skew-y-3 scale-150"></div>

    <div class="relative z-10">
      <img class="w-24 h-24 rounded-full border-4 border-white border-opacity-40 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
      <h3 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h3>
      <p class="text-sm text-gray-600 dark:text-gray-300">Frontend Developer</p>

      <div class="flex justify-center space-x-4 mt-5">
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.686-.208.686-.464 0-.232-.005-.865-.011-1.696-2.793.602-3.393-1.341-3.393-1.341-.454-1.156-1.11-1.46-1.11-1.46-.908-.619.069-.605.069-.605 1.004.07 1.532 1.03 1.532 1.03.892 1.529 2.341 1.089 2.91.833.091-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.931 0-1.091.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025.798-.222 1.637-.333 2.475-.337.838.004 1.677.115 2.475.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65.64.698 1.028 1.591 1.028 2.682 0 3.829-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.334-.012 2.41-.012 2.737 0 .259.208.567.694.463C21.133 20.19 24 16.425 24 12.017 24 6.484 19.522 2 14 2h-2z"/>
          </svg>
        </a>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19.633 7.997c-.013-.306-.026-.61-.048-.914-.078-1.066-1.062-2.05-2.128-2.128-.304-.022-.608-.035-.914-.048-1.503-.06-3.007-.06-4.51 0-1.503.06-3.007.06-4.51 0-.306.013-.61.026-.914.048-1.066.078-2.05 1.062-2.128 2.128-.078.304-.09.608-.103.914-.047 1.503-.047 3.007 0 4.51.013.306.026.61.048.914.078 1.066 1.062 2.05 2.128 2.128.304.022.608.035.914.048 1.503.06 3.007.06 4.51 0 1.503-.06 3.007-.06 4.51 0 .306-.013.61-.026.914-.048 1.066-.078 2.05-1.062 2.128-2.128.078-.304.09-.608.103-.914.047-1.503.047-3.007 0-4.51zm-2.106-3.844c.484 0 .878.394.878.878s-.394.878-.878.878-.878-.394-.878-.878.394-.878.878-.878zM12 9.098c-1.603 0-2.902 1.299-2.902 2.902s1.299 2.902 2.902 2.902 2.902-1.299 2.902-2.902-1.299-2.902-2.902-2.902z"/>
          </svg>
        </a>
        <a href="#" class="text-cyan-600 hover:text-cyan-800 dark:text-cyan-300 dark:hover:text-cyan-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.273 2.043l-4.512 8.799H9.421L4.898 2.043H2.5A.5.5 0 002 2.543v18.736a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V12.72L10.37 21.057h3.94l4.985-8.318v7.62a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V2.543a.5.5 0 00-.5-.5h-2.247a.5.5 0 00-.5.5v7.05h-.002l-4.636-7.05h-2.738z"/>
          </svg>
        </a>
      </div>

      <div class="mt-6 flex justify-around w-full">
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">1.2K</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Followers</p>
        </div>
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">350</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Following</p>
        </div>
      </div>
    </div>
  </div>
</div>