Avatars

An example of a simple avatar component for your site.

Example

Examples avatar with size and style

Image Description Image Description Image Description Image Description 
			                
			                  <img class="inline-block w-8 h-8 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar1.png" alt="Image Description">
			                  <img class="inline-block w-12 h-12 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar1.png" alt="Image Description">
			                  <img class="inline-block w-20 h-20 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar1.png" alt="Image Description">
			                  <img class="inline-block w-32 h-32 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar1.png" alt="Image Description">

Avatar rounded

Image Description Image Description Image Description Image Description 
			                
			                  <img class="inline-block rounded-full shadow-xl w-8 h-8 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar.png" alt="Image Description">
			                  <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar.png" alt="Image Description">
			                  <img class="inline-block rounded-full shadow-xl w-20 h-20 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar.png" alt="Image Description">
			                  <img class="inline-block rounded-full shadow-xl w-32 h-32 max-w-full bg-gray-300 dark:bg-gray-800" src="src/img/avatar/avatar.png" alt="Image Description">

Avatar group

Image Description Image Description Image Description 
			                
			                  <div class="relative">
			                    <a href="#">
			                      <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-gray-300 dark:bg-gray-800 ltr:-mr-4 rtl:-ml-4 border-2 border-gray-200 transform hover:-translate-y-1" src="src/img/avatar/avatar.png" alt="Image Description">
			                    </a>
			                    <a href="#">
			                      <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-gray-300 dark:bg-gray-800 ltr:-mr-4 rtl:-ml-4 border-2 border-gray-200 transform hover:-translate-y-1" src="src/img/avatar/avatar2.png" alt="Image Description">
			                    </a>
			                    <a href="#">
			                      <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-gray-300 dark:bg-gray-800 ltr:-mr-4 rtl:-ml-4 border-2 border-gray-200 transform hover:-translate-y-1" src="src/img/avatar/avatar3.png" alt="Image Description">
			                    </a>
			                  </div>