Glassmorphic User Profile Card

<div class="flex w-full items-center justify-center p-6">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="flex items-center justify-center" style="width:350px; height:400px; background:linear-gradient(180deg,#3A3A3A 0%, #292929 100%); border-radius:42px; box-shadow: inset 0px 2px 2px rgba(255,255,255,0.06), inset 0px -3px 3px rgba(0,0,0,0.3), 0px 22px 30px 5px rgba(0,0,0,0.35);">
    <div class="flex items-center gap-4 px-4 py-3 select-none transition-colors font-inter" style="width:232px; height:68px; background:rgba(248,248,248,0.1); border-radius:20px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0px 24px 32px -12px rgba(18,18,18,0.1), inset 2px 4px 16px rgba(248,248,248,0.06);">
      <div class="relative shrink-0" style="width:44px; height:44px;">
        <div class="absolute inset-0 rounded-full ring-1 ring-white/10" style="background-image:url('https://i.imgur.com/uRSOK24.png'); background-size:cover; background-position:center;"></div>
        <span class="absolute top-0 left-0 rounded-full" style="width:12px; height:12px; background:linear-gradient(180deg, rgba(248,248,248,0.9) 0%, rgba(248,248,248,0.3) 100%); box-shadow: inset 2px 4px 16px rgba(248,248,248,0.06); border:0.5px solid rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);"></span>
      </div>
      <div class="flex flex-col justify-center items-start flex-1 h-10 overflow-hidden">
        <div class="flex items-center w-full h-6">
          <span class="text-[14px] leading-5 font-medium text-neutral-100 truncate">Moyo</span>
        </div>
        <span class="text-[12px] leading-4 font-normal text-neutral-200/60 truncate">@moyoshiro</span>
      </div>
      <button type="button" aria-label="Open profile menu" class="shrink-0 inline-flex items-center justify-center
        rounded-full transition-colors hover:ring-1
        hover:ring-white/15 focus:outline-none focus-visible:ring-2
        focus-visible:ring-white/25" style="width:24px; height:24px; background:rgba(40,40,40,0.5);">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" class="text-neutral-200/80" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
    </div>
  </div>
</div>