Premium Profile Card with Animated Background

<div class="w-full max-w-sm p-6 flex items-center justify-center" style="font-family: 'Inter', ui-sans-serif, system-ui">
  <div class="group relative w-full">
    <div class="absolute inset-0 rounded-2xl overflow-hidden">
      <div class="pointer-events-none absolute -inset-10 rounded-full bg-gradient-to-r from-transparent via-gray-400/20 to-transparent blur-xl opacity-50 animate-spin [animation-duration:10s]"></div>
      <div class="pointer-events-none absolute -inset-20 rounded-full bg-gradient-to-r from-transparent via-gray-500/15 to-transparent blur-2xl opacity-30 animate-spin [animation-duration:18s] [animation-direction:reverse]"></div>
    </div>
    <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-b from-gray-300/40 via-gray-600/60 to-gray-800/50 transition-opacity duration-300 group-hover:opacity-100"></div>
    <div class="relative rounded-2xl overflow-hidden shadow-inner ring-1 ring-white/15 transition-all duration-300 ease-out hover:-translate-y-1 hover:ring-gray-400/30 hover:shadow-[0_10px_40px_-10px_rgba(107,114,128,0.4)] bg-gray-900" style="background-image: radial-gradient(at 88% 40%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 49% 30%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 14% 26%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 0% 64%, hsl(220, 9%, 46%) 0px, transparent 85%), radial-gradient(at 41% 94%, hsl(215, 14%, 34%) 0px, transparent 85%), radial-gradient(at 100% 99%, hsl(217, 19%, 27%) 0px, transparent 85%)">
      <div class="relative p-6">
        <div class="flex justify-center mb-4">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e183f309-3f53-4b47-af6c-55a9cce9da41_320w.jpg" alt="Profile" class="w-20 h-20 rounded-full object-cover ring-2 ring-gray-500/30 shadow-lg">
            <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full ring-2 ring-gray-900 flex items-center justify-center">
              <div class="w-2 h-2 bg-white rounded-full"></div>
            </div>
          </div>
        </div>
        <div class="text-center mb-6">
          <h2 class="text-xl font-semibold tracking-tight text-white mb-1">Alex Morgan</h2>
          <p class="text-sm text-gray-400">Senior Product Designer</p>
          <p class="text-xs text-gray-500 mt-1">San Francisco, CA</p>
        </div>
        <div class="grid grid-cols-3 gap-4 mb-6">
          <div class="text-center">
            <div class="text-lg font-semibold text-white">142</div>
            <div class="text-xs text-gray-400">Projects</div>
          </div>
          <div class="text-center border-x border-gray-700/50">
            <div class="text-lg font-semibold text-white">2.8k</div>
            <div class="text-xs text-gray-400">Followers</div>
          </div>
          <div class="text-center">
            <div class="text-lg font-semibold text-white">4.9</div>
            <div class="text-xs text-gray-400">Rating</div>
          </div>
        </div>
        <hr class="mb-6 border-t border-white/10">
        <div class="mb-6">
          <h3 class="text-sm font-medium text-white mb-3">Skills</h3>
          <div class="flex flex-wrap gap-2">
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">UI/UX Design</span>
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">Figma</span>
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">Prototyping</span>
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">React</span>
          </div>
        </div>
        <div class="space-y-3 mb-6">
          <div class="flex items-center gap-3 text-sm">
            <div class="w-5 h-5 text-gray-400 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                <path d="m22 7-10 5L2 7"></path>
              </svg>
            </div>
            <span class="text-gray-300">alex.morgan@email.com</span>
          </div>
          <div class="flex items-center gap-3 text-sm">
            <div class="w-5 h-5 text-gray-400 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
            </div>
            <span class="text-gray-300">+1 (555) 123-4567</span>
          </div>
          <div class="flex items-center gap-3 text-sm">
            <div class="w-5 h-5 text-gray-400 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <circle cx="12" cy="12" r="4"></circle>
                <path d="M12 1v6M12 17v6"></path>
                <path d="m5.93 5.93 4.24 4.24m4.24 4.24 4.24 4.24M1 12h6m10 0h6m-2.07-5.93-4.24 4.24m-4.24 4.24L5.93 18.07"></path>
              </svg>
            </div>
            <span class="text-gray-300">alexmorgan.design</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-gray-700 to-gray-600 shadow-[inset_0_-2px_25px_-4px_rgba(255,255,255,0.2)] ring-1 ring-white/10 hover:ring-gray-300/40 hover:from-gray-600 hover:to-gray-500 hover:shadow-lg transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60">
            Follow
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <line x1="19" x2="19" y1="8" y2="14"></line>
              <line x1="22" x2="16" y1="11" y2="11"></line>
            </svg>
          </button>
          <button class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium text-gray-300 bg-gray-800/60 ring-1 ring-gray-600/30 hover:bg-gray-700/60 hover:text-white hover:ring-gray-500/40 transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>