Avatars

  <!-- copy:start -->
  <div class="relative group">
    <img
      class="object-cover rounded-full size-32 ring-2 ring-white dark:ring-zinc-800"
      src="/avatars/4.jpg"
      alt=""
    />
    <div
      class="absolute inset-0 flex items-center justify-center p-1 rounded-full opacity-0 gap-1 bg-white/90 dark:bg-zinc-900/90 ring-2 ring-white dark:ring-zinc-800 group-hover:opacity-100 transition-opacity"
    >
      <button
        class="flex items-center justify-center rounded-full size-6 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-200"
        aria-label="Edit"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-3.5"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
            d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
          ></path><path d="M13.5 6.5l4 4"></path></svg
        >
      </button>
      <button
        class="flex items-center justify-center rounded-full size-6 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-200"
        aria-label="View"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-3.5"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
            d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path
            d="M21 12c-2.4 4 -6 6 -9 6s-6.6 -2 -9 -6c2.4 -4 6 -6 9 -6s6.6 2 9 6"
          ></path></svg
        >
      </button>
      <button
        class="flex items-center justify-center rounded-full size-6 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-200"
        aria-label="Code"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-3.5"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
            d="M7 8l-4 4l4 4"></path><path d="M17 8l4 4l-4 4"></path><path
            d="M14 4l-4 16"></path></svg
        >
      </button>
    </div>
  </div>

 <div class="flex-shrink-0 block group">
  <div class="flex flex-col items-center text-center gap-2">
    <div>
      <img
        class="inline-block object-cover rounded-full size-16 ring-2 ring-white dark:ring-zinc-800"
        src="/avatars/1.jpg"
        alt="User"
      />
    </div>
    <a
      class="text-base font-medium hover:text-blue-600 text-zinc-500 dark:text-zinc-400"
      href="#_"
    >
      <h3 class="text-base font-medium text-zinc-900 dark:text-white">
        Michael Andreuzza
      </h3>
      <p class="text-xs font-medium text-zinc-400">example@example.com</p>
    </a>
    <nav
      aria-labelledby="social-icons-heading"
      role="navigation"
      class="flex items-center gap-4 text-zinc-500"
    >
      <p class="text-base sr-only" id="social-icons-heading">
        Follow us on social media
      </p>
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500 dark:Text-zinc-400 dark:hover:text-blue-400"
        href="#_"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-layout-brand-x size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
          <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
        </svg>
      </a>
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500 dark:Text-zinc-400 dark:hover:text-blue-400"
        href="#_"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-layout-brand-linkedin size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
          ></path>
          <path d="M8 11l0 5"></path>
          <path d="M8 8l0 .01"></path>
          <path d="M12 16l0 -5"></path>
          <path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
        </svg>
      </a>
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500 dark:Text-zinc-400 dark:hover:text-blue-400"
        href="#_"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-layout-brand-github size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
          ></path>
        </svg>
      </a>
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500 dark:Text-zinc-400 dark:hover:text-blue-400"
        href="#_"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-layout-brand-youtube size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z"
          ></path>
          <path d="M10 9l5 3l-5 3z"></path>
        </svg>
      </a>
    </nav>
  </div>
</div>

<div class="flex-shrink-0 block group">
  <div class="flex items-center gap-2">
    <div>
      <img
        class="inline-block object-cover rounded-full size-10 ring-2 ring-white dark:ring-zinc-800"
        src="/avatars/1.jpg"
        alt="User"
      />
    </div>
    <a
      class="text-base font-medium hover:text-blue-600 text-zinc-500"
      href="#_"
    >
      <h3 class="text-base font-medium text-zinc-900 dark:text-white">
        Michael Andreuzza
      </h3>
      <p class="text-xs font-medium text-zinc-400 dark:text-zinc-300">
        example@example.com
      </p>
    </a>
  </div>
</div>