Avatar

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" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block w-12 h-12 max-w-full" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block w-20 h-20 max-w-full" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block w-32 h-32 max-w-full" src="src/img-min/avatar/img1-small.jpg" 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" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block rounded-full shadow-xl w-20 h-20 max-w-full" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
                  <img class="inline-block rounded-full shadow-xl w-32 h-32 max-w-full" src="src/img-min/avatar/img1-small.jpg" 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-20 h-20 max-w-full ltr:-mr-6 rtl:-ml-6 border-4 border-gray-100 dark:border-gray-700 transform hover:-translate-y-1" src="../../src/img-min/avatar/img1-small.jpg" alt="Image Description">
                    </a>
                    <a href="#">
                      <img class="inline-block rounded-full shadow-xl w-20 h-20 max-w-full ltr:-mr-6 rtl:-ml-6 border-4 border-gray-100 dark:border-gray-700 transform hover:-translate-y-1" src="../../src/img-min/avatar/img2-small.jpg" alt="Image Description">
                    </a>
                    <a href="#">
                      <img class="inline-block rounded-full shadow-xl w-20 h-20 max-w-full ltr:-mr-6 rtl:-ml-6 border-4 border-gray-100 dark:border-gray-700 transform hover:-translate-y-1" src="../../src/img-min/avatar/img3-small.jpg" alt="Image Description">
                    </a>
                  </div>