Avatar Component

1<!-- container -->
2<div class="mx-auto p-2">
3  <!-- row -->
4  <div class="flex flex-row flex-wrap">
5    <div class="mb-6 w-full max-w-full flex-shrink px-4">
6      <div class="relative">
7      
8        <!-- avatar squared example -->
9        <div>
10          <h2 class="my-4 text-lg font-semibold text-gray-800">Avatar squared</h2>
11          <!-- list of avatar -->
12          <div>
13            <img class="inline-block h-8 w-8 max-w-full bg-gray-100 dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
14            <img class="inline-block h-12 w-12 max-w-full bg-gray-100 dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
15            <img class="inline-block h-20 w-20 max-w-full bg-gray-100 dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
16            <img class="inline-block h-32 w-32 max-w-full bg-gray-100 dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
17          </div>
18
19          <!-- avatar rounded example -->
20          <h2 class="my-4 text-lg font-semibold text-gray-800">Avatar rounded</h2>
21          <!-- list of avatar -->
22          <div>
23            <img class="inline-block h-8 w-8 max-w-full rounded-full bg-gray-100 shadow-xl dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
24            <img class="inline-block h-12 w-12 max-w-full rounded-full bg-gray-100 shadow-xl dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
25            <img class="inline-block h-20 w-20 max-w-full rounded-full bg-gray-100 shadow-xl dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
26            <img class="inline-block h-32 w-32 max-w-full rounded-full bg-gray-100 shadow-xl dark:bg-gray-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
27          </div>
28        </div>
29      </div>
30    </div>
31  </div>
32</div>

1<div class="flex items-center space-x-4">
2  <img class="h-20 w-20 rounded-full border-2 border-gray-200 shadow-md" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="" />
3  <div class="font-medium dark:text-blue-700">
4    <div>Rahul Karda</div>
5    <div class="text-sm text-gray-500 dark:text-gray-500">Joined Github in 2020</div>
6  </div>
7</div>
8<div class="flex items-center space-x-8">
9  <img class="border-6 h-28 w-28 rounded-full border-gray-200 shadow-md" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="" />
10  <div class="scale-125 font-medium dark:text-blue-700">
11    <div>Rahul Karda</div>
12    <div class="text-sm text-gray-500 dark:text-gray-500">Joined Github in 2020</div>
13  </div>
14</div>
15<div class="flex items-center space-x-12">
16  <img class="h-40 w-40 rounded-full border-2 border-gray-200 shadow-md" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="" />
17  <div class="scale-150 font-medium dark:text-blue-700">
18    <div>Rahul Karda</div>
19    <div class="text-sm text-gray-500 dark:text-gray-500">Joined Github in 2020</div>
20  </div>
21</div>

1<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/7.webp" alt="User dropdown" />
2
3<div class="relative">
4  <img class="inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="" />
5  <span class="absolute left-14 top-0 h-7 w-7 rounded-full border-2 border-white bg-green-400 dark:border-gray-800"></span>
6</div>
7<div class="relative">
8  <img class="inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/9.webp" alt="" />
9  <span class="absolute left-14 top-4 h-7 w-7 -translate-y-1/2 transform rounded-full border-2 border-white bg-red-400 dark:border-gray-800"></span>
10</div>
11<div class="relative">
12  <img class="inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/10.webp" alt="" />
13  <span class="absolute bottom-0 left-14 h-7 w-7 rounded-full border-2 border-white bg-green-400 dark:border-gray-800"></span>
14</div>
15<div class="relative">
16  <img class="inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/11.webp" alt="" />
17  <span class="absolute bottom-2 left-14 h-7 w-7 translate-y-1/4 transform rounded-full border-2 border-white bg-red-400 dark:border-gray-800"></span>
18</div>

1<!-- container -->
2<div class="mx-auto p-5">
3  <div class="p-5">
4    <h2 class="mb-4 text-lg font-semibold text-gray-800">Avatar group</h2>
5    <!-- avatar group component -->
6    <div class="relative">
7      <img class="-ml-4 inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/6.webp" alt="Image Description" />
8      <img class="-ml-4 inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/7.webp" alt="Image Description" />
9      <img class="-ml-4 inline-block h-20 w-20 max-w-full transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:bg-blue-100" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
10    </div>
11  </div>
12  <!-- example -->
13  <div class="p-3">
14    <p class="mb-2 text-gray-500">Example</p>
15    <div class="mb-6 rounded-lg bg-white py-6 px-4 shadow-lg w-fit">
16      <div class="flex flex-col pb-2">
17        <h3 class="text-base font-bold">New Followers</h3>
18        <hr class="my-2" />
19      </div>
20      <div class=" px-4">
21        <img class="-ml-4 inline-block h-12 w-fit transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:border-gray-100 dark:bg-gray-800" src="https://mdbcdn.b-cdn.net/img/new/avatars/6.webp" alt="Image Description" />
22        <img class="-ml-4 inline-block h-12 w-fit transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:border-gray-100 dark:bg-gray-800" src="https://mdbcdn.b-cdn.net/img/new/avatars/7.webp" alt="Image Description" />
23        <img class="-ml-4 inline-block h-12 w-fit transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:border-gray-100 dark:bg-gray-800" src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" alt="Image Description" />
24        <img class="-ml-4 inline-block h-12 w-fit transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:border-gray-100 dark:bg-gray-800" src="https://mdbcdn.b-cdn.net/img/new/avatars/9.webp" alt="Image Description" />
25        <img class="-ml-4 inline-block h-12 w-fit transform rounded-full border-2 border-gray-400 bg-gray-300 shadow-xl transition-all hover:-translate-y-1 dark:border-gray-100 dark:bg-gray-800" src="https://mdbcdn.b-cdn.net/img/new/avatars/10.webp" alt="Image Description" />
26
27        <!-- more -->
28
29        <span class="self-center text-sm font-semibold text-gray-500 ltr:ml-5 rtl:mr-5">+232 more</span>
30      </div>
31    </div>
32  </div>
33</div>