Avatars

<img class="w-24 h-24 rounded-full inline-block mr-2" src="assets/images/users/avatar-7.png" alt="Rounded avatar">
<img class="w-20 h-20 rounded-full inline-block mr-2" src="assets/images/users/avatar-7.png" alt="Rounded avatar">
<img class="w-16 h-16 rounded-full inline-block mr-2" src="assets/images/users/avatar-7.png" alt="Rounded avatar">
<img class="w-12 h-12 rounded-full inline-block mr-2" src="assets/images/users/avatar-7.png" alt="Rounded avatar">
<img class="w-10 h-10 rounded-full inline-block mr-2" src="assets/images/users/avatar-7.png" alt="Rounded avatar">

<img class="w-24 h-24 rounded-md inline-block mr-2" src="assets/images/users/avatar-11.jpg" alt="Rounded avatar">
<img class="w-20 h-20 rounded-md inline-block mr-2" src="assets/images/users/avatar-11.jpg" alt="Rounded avatar">
<img class="w-16 h-16 rounded-md inline-block mr-2" src="assets/images/users/avatar-11.jpg" alt="Rounded avatar">
<img class="w-12 h-12 rounded-md inline-block mr-2" src="assets/images/users/avatar-11.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded-md inline-block mr-2" src="assets/images/users/avatar-11.jpg" alt="Rounded avatar">

                                       
<div class="flex items-center">
    <img class="w-10 h-10 rounded-full" src="assets/images/users/avatar-9.png" alt="">
    <div class="font-medium dark:text-white ms-2">
        <h6 class="text-lg text-gray-800 dark:text-gray-200 -mb-1">David Jackson</h6>
        <p class="text-xs text-gray-500 dark:text-gray-400">Frontend Developer</p>
    </div>
</div>

<div class="relative mr-2">
    <img class="w-10 h-10 rounded-full" src="assets/images/users/avatar-2.png" alt="">
    <span class="top-0 left-7 absolute  w-2.5 h-2.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative mr-2">
    <img class="w-10 h-10 rounded" src="assets/images/users/avatar-11.jpg" alt="">
    <span class="absolute top-0 left-8 transform -translate-y-1/2 w-2.5 h-2.5 bg-red-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative mr-2">
    <img class="w-10 h-10 rounded-full" src="assets/images/users/avatar-2.png" alt="">
    <span class="bottom-0 left-7 absolute  w-2.5 h-2.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded" src="assets/images/users/avatar-11.jpg" alt="">
    <span class="absolute bottom-0 left-8 transform translate-y-1/4 w-2.5 h-2.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>

<div class="flex -space-x-4">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="assets/images/users/avatar-2.png" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="assets/images/users/avatar-8.png" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="assets/images/users/avatar-9.png" alt="">
    <a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800" href="#">+99</a>
</div>

<span class="inline-flex  justify-center items-center h-24 w-24 rounded-full bg-green-500/10 ">
    <span class="text-4xl text-green-500 font-semibold">MT</span>
</span>
<span class="inline-flex  justify-center items-center h-20 w-20 rounded-full bg-pink-500/10 ">
    <span class="text-2xl text-pink-500 font-semibold">MT</span>
</span>
<span class="inline-flex  justify-center items-center h-16 w-16 rounded-full bg-indigo-500/10 ">
    <span class="text-xl text-indigo-500 font-semibold">MT</span>
</span>
<span class="inline-flex  justify-center items-center h-12 w-12 rounded-full bg-orange-500/10 ">
    <span class="text-base text-orange-400 font-semibold">MT</span>
</span>
<span class="inline-flex  justify-center items-center h-10 w-10 rounded-full bg-cyan-500/10 ">
    <span class="text-base text-cyan-500 font-semibold">MT</span>
</span>

<span class="inline-flex  justify-center items-center h-24 w-24 rounded-full bg-green-500/10 ">
    <i class="ti ti-user text-green-500 text-5xl"></i>
</span>
<span class="inline-flex  justify-center items-center h-20 w-20 rounded-full bg-pink-500/10 ">
    <i class="ti ti-user text-pink-500 text-4xl"></i>
</span>
<span class="inline-flex  justify-center items-center h-16 w-16 rounded-full bg-indigo-500/10 ">
    <i class="ti ti-user text-indigo-500 text-3xl"></i>
</span>
<span class="inline-flex  justify-center items-center h-12 w-12 rounded-full bg-orange-500/10 ">
    <i class="ti ti-user text-orange-400 text-2xl"></i>
</span>
<span class="inline-flex  justify-center items-center h-10 w-10 rounded-full bg-cyan-500/10 ">
    <i class="ti ti-user text-cyan-500 text-2xl"></i>
</span>