Avatar

<div class="flex gap-20px items-center">
  <!-- L With image -->
  <div class="flex rounded-full overflow-hidden w-48px h-48px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
  <!-- L Empty image -->
  <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
    <span class="text-black-500 text-p1">
      K
    </span>
  </div>
  <!-- M With image -->
  <div class="flex rounded-full overflow-hidden w-32px h-32px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
  <!-- M Empty image -->
  <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
    <span class="text-black-500 text-p3">
      K
    </span>
  </div>
  <!-- S With image -->
  <div class="flex rounded-full overflow-hidden w-24px h-24px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
  <!-- S Empty image -->
  <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
    <span class="text-black-500 text-p4">
      K
    </span>
  </div>
</div>

<div class="flex flex-col gap-16px">
  <!-- With image -->
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full overflow-hidden w-24px h-24px">
      <img
        src="/assets/images/shared/avatar.png"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="avatar">
      </img>
    </div>
    <p class="text-p2">
      Kaida
    </p>
  </div>
  <!-- Empty image -->
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
      <span class="text-black-500 text-p4">
        K
      </span>
    </div>
    <p class="text-p2">
      Kaida
    </p>
  </div>
</div>

<div class="flex flex-col gap-32px justify-center items-center">
  <!-- L Group -->
  <div class="flex items-center">
    <div class="grid border border-transparent rounded-full dark:border-black">
      <div class="flex rounded-full overflow-hidden w-48px h-48px">
        <img
          src="/assets/images/shared/avatar.png"
          class="object-cover w-full h-full"
          loading="lazy"
          alt="avatar">
        </img>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
        <span class="text-black-500 text-p1">
          K
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
        <span class="text-black-500 text-p1">
          D
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
        <span class="text-black-500 text-p1">
          +2
        </span>
      </div>
    </div>
  </div>
  <!-- M Group -->
  <div class="flex items-center">
    <div class="grid border border-transparent rounded-full dark:border-black">
      <div class="flex rounded-full overflow-hidden w-32px h-32px">
        <img
          src="/assets/images/shared/avatar.png"
          class="object-cover w-full h-full"
          loading="lazy"
          alt="avatar">
        </img>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
        <span class="text-black-500 text-p3">
          K
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
        <span class="text-black-500 text-p3">
          D
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
        <span class="text-black-500 text-p3">
          +2
        </span>
      </div>
    </div>
  </div>
  <!-- S Group -->
  <div class="flex items-center">
    <div class="grid border border-transparent rounded-full dark:border-black">
      <div class="flex rounded-full overflow-hidden w-24px h-24px">
        <img
          src="/assets/images/shared/avatar.png"
          class="object-cover w-full h-full"
          loading="lazy"
          alt="avatar">
        </img>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
        <span class="text-black-500 text-p4">
          K
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
        <span class="text-black-500 text-p4">
          D
        </span>
      </div>
    </div>
    <div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
      <div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
        <span class="text-black-500 text-p4">
          +2
        </span>
      </div>
    </div>
  </div>
</div>