Avatar

Examples for opting different size of image sizes.

Circular avatars

Use the .rounded-full utility class to make avatars circular.

Image Image Image Image Image Image 
<img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-24 w-24 inline-block" />
                                    <img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-20 w-20 inline-block" />
                                    <img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-16 w-16 inline-block" />
                                    <img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-10 w-10 inline-block" />
                                    <img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-8 w-8 inline-block" />
                                    <img src="../assets/images/avatar/avatar-2.jpg" alt="Image" class="rounded-full h-6 w-6 inline-block" />

Initials

You won't always have an image for every user, so easily use initials instead.

2+
2+
2+
2+
2+
2+
<div class="relative w-24 h-24 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-xl
                                          border-2 border-white">2+</div>
                                    <div class="relative w-20 h-20 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-xl
                                          border-2 border-white">2+</div>
                                    <div class="relative w-16 h-16 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-lg
                                          border-2 border-white">2+</div>
                                    <div class="relative w-10 h-10 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-md
                                          border-2 border-white">2+</div>
                                    <div class="relative w-8 h-8 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-sm
                                          border-2 border-white">2+</div>
                                    <div class="relative w-6 h-6 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-sm
                                          border-2 border-white">2+</div>

Stacked

Use this example if you want to stack a group of users by overlapping the avatar components.

Profile image Profile image Profile image
2+
<div class="-space-x-5">
                                    <img class="relative inline-block object-cover w-8
                                          h-8 rounded-full border-white border-2" src="../assets/images/avatar/avatar-1.jpg" alt="Profile image" />
                                    <img class="relative inline-block object-cover w-8
                                          h-8 rounded-full border-white border-2" src="../assets/images/avatar/avatar-2.jpg" alt="Profile image" />
                                    <img class="relative inline-block object-cover w-8
                                          h-8 border-2 rounded-full border-white" src="../assets/images/avatar/avatar-1.jpg" alt="Profile image" />
                                    <div class="relative w-8 h-8 bg-indigo-600
                                          rounded-full inline-flex items-center justify-center text-white text-sm
                                          border-2 border-white">2+</div>
                                    </div>
Buy Pro