Moderne Glas-Visitenkarte (inspiriert von Apple)

<div class="relative w-full max-w-xl rounded-[28px] bg-white/12 backdrop-blur-3xl border border-white/20 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.6)] overflow-hidden">

  <div class="absolute inset-0 bg-gradient-to-br from-white/15 via-transparent to-white/5"></div>

  <div class="relative p-8 space-y-8">

    <div class="flex items-center gap-6">

      <div class="relative">
        <img class="w-24 h-24 rounded-full object-cover ring-1 ring-white/40" />
        <span class="absolute bottom-1 right-1 w-3.5 h-3.5 rounded-full bg-emerald-400 ring-2 ring-black/30"></span>
      </div>

      <div class="flex-1">
        <h3 class="text-xl font-semibold text-white tracking-tight">
          Lorem ipsum dolor
        </h3>
        <p class="text-sm text-white/70 mt-0.5">
          Lorem ipsum dolor
        </p>
        <p class="text-xs text-white/50 mt-2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        </p>
      </div>

    </div>

    <div class="rounded-2xl bg-white/5 border border-white/10 p-5">
      <p class="text-sm leading-relaxed text-white/75">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>

    <div class="grid grid-cols-3 gap-4 text-center">

      <div class="rounded-xl bg-white/5 border border-white/10 py-4">
        <p class="text-lg font-medium text-white">12</p>
        <p class="text-[11px] tracking-wide uppercase text-white/50">Years</p>
      </div>

      <div class="rounded-xl bg-white/5 border border-white/10 py-4">
        <p class="text-lg font-medium text-white">184</p>
        <p class="text-[11px] tracking-wide uppercase text-white/50">Projects</p>
      </div>

      <div class="rounded-xl bg-white/5 border border-white/10 py-4">
        <p class="text-lg font-medium text-white">Top 5%</p>
        <p class="text-[11px] tracking-wide uppercase text-white/50">Rated</p>
      </div>

    </div>

    <div class="flex items-center justify-between pt-2">

      <div class="flex gap-3">

        <a class="w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur flex items-center justify-center transition">
          <svg class="w-4 h-4 text-white" fill="currentColor" viewbox="0 0 24 24">
            <path d="M22 5.8a8.5 8.5 0 01-2.4.7 4.1 4.1 0 001.8-2.3 8.3 8.3 0 01-2.6 1 4.1 4.1 0 00-7 3.7A11.6 11.6 0 013 4.9a4.1 4.1 0 001.3 5.5 4 4 0 01-1.9-.5v.1a4.1 4.1 0 003.3 4 4.3 4.3 0 01-1.9.1 4.1 4.1 0 003.8 2.9A8.3 8.3 0 012 19.6a11.7 11.7 0 006.3 1.8c7.6 0 11.8-6.3 11.8-11.8v-.5A8.5 8.5 0 0022 5.8z"></path>
          </svg>
        </a>

        <a class="w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur flex items-center justify-center transition">
          <svg class="w-4 h-4 text-white" fill="currentColor" viewbox="0 0 24 24">
            <path d="M12 2.2c-5.4 0-9.8 4.4-9.8 9.8 0 4.3 2.8 7.9 6.7 9.2.5.1.7-.2.7-.5v-1.8c-2.7.6-3.3-1.2-3.3-1.2-.4-1-1.1-1.3-1.1-1.3-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .9.1-.6.4-1.1.7-1.4-2.2-.2-4.5-1.1-4.5-5 0-1.1.4-2 1-2.7-.1-.2-.4-1.3.1-2.7 0 0 .8-.2 2.8 1a9.7 9.7 0 015.1 0c2-1.2 2.8-1 2.8-1 .5 1.4.2 2.5.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.8-4.5 5 .4.3.8 1 .8 2v3c0 .3.2.6.7.5a9.8 9.8 0 006.7-9.2c0-5.4-4.4-9.8-9.8-9.8z"></path>
          </svg>
        </a>

      </div>

      <button class="px-4 py-2 rounded-full bg-white/15 hover:bg-white/25 border border-white/20 text-sm text-white transition">
        View Full Profile
      </button>

    </div>

  </div>

</div>