Ynex - Laravel Tailwind CSS Admin & Dashboard Template

Avatars

<span class="avatar me-2 avatar-radius-0">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="img">
</span>

Avatar Sizes

Avatars of different sizes

<span class="avatar avatar-xs me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-sm me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg" alt="img">
</span>

Avatar With Icons

Avatar contains icons to perform respective action.

 <span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge bg-success text-white rounded-full avatar-badge"><i class="fe fe-camera text-[.5rem]"></i></a>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge text-white rounded-full bg-secondary avatar-badge"><i class="fe fe-edit text-[.5rem]"></i></a>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/14.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge text-white rounded-full bg-warning avatar-badge"><i class="fe fe-plus text-[.5rem]"></i></a>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/13.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge text-white rounded-full bg-info avatar-badge"><i class="fe fe-edit text-[.625rem]"></i></a>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/15.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge text-white rounded-full bg-success avatar-badge"><i class="fe fe-camera text-[.625rem]"></i></a>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg" alt="img">
    <a aria-label="anchor" href="javascript:void(0);" class="badge text-white rounded-full bg-danger avatar-badge"><i class="fe fe-plus text-[.625rem]"></i></a>
</span>

Avatar With Online Status Indicators

avatars having online status indicator.

<span class="avatar avatar-xs me-2 online avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm online me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/10.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 online avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/12.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 online avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/13.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 online avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/14.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 online avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/15.jpg" alt="img">
</span>

Avatar With Ofline Status Indicators

avatars having a offline status indicator.

<span class="avatar avatar-xs me-2 offline avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm offline me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 offline avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 offline avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 offline avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 offline avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="img">
</span>

Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

 <span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
    <span class="badge rounded-full text-white bg-primary avatar-badge">2</span>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="img">
    <span class="badge rounded-full text-white bg-secondary avatar-badge">5</span>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/14.jpg" alt="img">
    <span class="badge rounded-full text-white bg-warning avatar-badge">1</span>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/13.jpg" alt="img">
    <span class="badge rounded-full text-white bg-info avatar-badge">7</span>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/15.jpg" alt="img">
    <span class="badge rounded-full text-white bg-success avatar-badge">3</span>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg" alt="img">
    <span class="badge rounded-full text-white bg-danger avatar-badge">9</span>
</span>

Avatar With Brand Logos


    <div class="space-x-3 rtl:space-x-reverse">
    <div class="relative inline-block">
        <img class="inline-block avatar avatar-lg" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
        <span class="absolute bottom-[-7px] end-[-15px] block p-1 rounded-full bg-white dark:bg-slate-900 dark:ring-slate-900">
            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="TailwindCss">
                <path>
                    d="M18.5 9.51a4.22 4.22 0 0 1-1.91-1.34A5.77 5.77 0 0 0 12 6a4.72 4.72 0 0 0-5 4 3.23 3.23 0 0 1 3.5-1.49 4.32 4.32 0 0 1 1.91 1.35A5.77 5.77 0 0 0 17 12a4.72 4.72 0 0 0 5-4 3.2 3.2 0 0 1-3.5 1.51zm-13 4.98a4.22 4.22 0 0 1 1.91 1.34A5.77 5.77 0 0 0 12 18a4.72 4.72 0 0 0 5-4 3.23 3.23 0 0 1-3.5 1.49 4.32 4.32 0 0 1-1.91-1.35A5.8 5.8 0 0 0 7 12a4.72 4.72 0 0 0-5 4 3.2 3.2 0 0 1 3.5-1.51z"
                    fill="#87ddfd" class="color000000 svgShape"></path>
            </svg>
        </span>
    </div>
    <div class="relative inline-block">
        <img class="inline-block avatar avatar-lg avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="img">
        <span class="absolute bottom-[-7px] end-[-15px] block p-1 rounded-full bg-white dark:bg-slate-900 dark:ring-slate-900">
            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="slack">
                <g fill="none" fill-rule="evenodd">
                    <path> fill="#36C5F0"
                        d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386">
                    </path>
                    <path> fill="#2EB67D"
                        d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387">
                    </path>
                    <path> fill="#ECB22E"
                        d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386">
                    </path>
                    <path> fill="#E01E5A"
                        d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387">
                    </path>
                </g>
            </svg>
        </span>
    </div>
</div>

Avatar With Placeholder Icon


    <span class="avatar avatar-sm  avatar-rounded me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/22.jpg" alt="img">
  </span>
  
  <span class="avatar avatar-md  avatar-rounded me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/22.jpg" alt="img">
  </span>
  
  <span class="avatar avatar-lg  avatar-rounded me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/22.jpg" alt="img">
  </span>
  
  <span class="avatar avatar-xl  avatar-rounded me-2">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/22.jpg" alt="img">
  </span>

Avatar with solid color variants

YX YX YX YX YX YX YX


    <span> class="avatar avatar-md avatar-rounded text-white bg-primary">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-secondary">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-warning">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-danger">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-success">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-info">YX</span>
<span> class="avatar avatar-md avatar-rounded text-white bg-light text-defaulttextcolor">YX</span>

Avatar with soft color variants

YX YX YX YX YX YX YX


    <span class="avatar avatar-md avatar-rounded bg-primary/10 text-primary/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-secondary/10 text-secondary/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-success/10 text-success/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-info/10 text-info/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-danger/10 text-danger/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-warning/10 text-warning/80">YX</span>
    <span class="avatar avatar-md avatar-rounded bg-light/50 text-defaulttextcolor">YX</span>

Avatar with outline color variants

YX YX YX YX YX YX YX


    <span> class="avatar avatar-md avatar-rounded border border-primary/80 text-primary">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-secondary/80 text-secondary">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-success/80 text-success">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-danger/80 text-danger">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-info/80 text-info">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-warning/80 text-warning">YX</span>
<span> class="avatar avatar-md avatar-rounded border border-gray-500 dark:text-white text-defaulttextcolor">YX</span>

Avatar with white color variants

YX YX YX YX


<span> class="avatar avatar-sm avatar-rounded me-2 border border-defaultborder bg-white text-defaulttextcolor dark:bg-bodybg dark:border-white/10 dark:text-white">
YX
</span>
<span> class="avatar avatar-md avatar-rounded me-2 border border-defaultborder bg-white text-defaulttextcolor dark:bg-bodybg dark:border-white/10 dark:text-white">
YX
</span>
<span> class="avatar avatar-lg avatar-rounded me-2 border border-defaultborder bg-white text-defaulttextcolor dark:bg-bodybg dark:border-white/10 dark:text-white">
YX
</span>
<span> class="avatar avatar-xl avatar-rounded me-2 border border-defaultborder bg-white text-defaulttextcolor dark:bg-bodybg dark:border-white/10 dark:text-white">
YX
</span>

Avatar displaying a tooltip


<div class="hs-tooltip inline-block">
<a class="hs-tooltip-toggle relative inline-block avatar online avatar-rounded"
href="#">
<img class="inline-block size-[46px]" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg"
    alt="img">
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-lg shadow-sm dark:bg-slate-700"
    role="tooltip">
    Stella is online
</div>
</a>
</div>

Avatar with text

Michael

mic@gmail.com


<div class="flex-shrink-0 group block">
<div class="flex items-center">
    <img class="avatar avatar-md avatar-rounded"
        src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="Image Description" />
    <div class="ms-3">
        <h6> class="">Michael</h6>
        <p> class="text-sm font-medium">mic@gmail.com</p>
    </div>
</div>
</div>

Avatar with border color


<div class="flex -space-x-2">
<img class="avatar avatar-rounded border-2 border-primary" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="Image Description">
<img class="avatar avatar-rounded border-2 border-primary" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="Image Description">
<img class="avatar avatar-rounded border-2 border-primary" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="Image Description">
<img class="avatar avatar-rounded border-2 border-primary" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="Image Description">
</div>

Stacked avatar with sizes


                                    <div class="grid gap-10 sm:flex sm:items-end justify-between">
                                    <div class="avatar-list-stacked">
                                        <span class="avatar avatar-sm avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-sm avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-sm avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                    </div>
                                    <div class="avatar-list-stacked">
                                        <span class="avatar avatar-md avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-md avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-md avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                    </div>
                                    <div class="avatar-list-stacked">
                                        <span class="avatar avatar-lg avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-lg avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-lg avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                    </div>
                                    <div class="avatar-list-stacked">
                                        <span class="avatar avatar-xl avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-xl avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
                                        </span>
                                        <span class="avatar avatar-xl avatar-rounded">
                                            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                    </div>
                                </div>

Avatars grid


                                    <div class="grid gap-10 sm:items-end">
                                    <div class="grid xxl:!grid-cols-8 md:!grid-cols-11 sm:grid-cols-7 grid-cols-4 gap-4"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/1.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/5.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="Image Description"> 
                                        <img class="avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg" alt="Image Description"> 
                                        <span class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] avatar-rounded bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
                                            <span> class="font-medium text-gray-500 leading-none dark:text-white/70">9+</span> 
                                        </span> 
                                    </div>
                                </div>

Stacked avatar with tooltip


<div class="flex -space-x-2 rtl:space-x-reverse">
<div class="hs-tooltip inline-block">
    <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
    <img class="avatar rounded-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/1.jpg" alt="Image Description">
    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-sm shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1096px, -301px);">
        James bond
    </div>
    </a>
</div>
<div class="hs-tooltip inline-block show">
    <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
    <img class="avatar rounded-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="Image Description">
    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-sm shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1126px, -301px);">
        James bond
    </div>
    </a>
</div>
<div class="hs-tooltip inline-block show">
    <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
    <img class="avatar rounded-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="Image Description">
    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-sm shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1156px, -301px);">
        James bond
    </div>
    </a>
</div>
<div class="hs-tooltip inline-block show">
    <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
    <img class="avatar rounded-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/3.jpg" alt="Image Description">
    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-sm shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1186px, -301px);">
        James bond
    </div>
    </a>
</div>
</div>

Avatars with dropdown


<div class="flex -space-x-2 rtl:space-x-reverse">
<img class="inline-block avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="Image Description">
<img class="inline-block avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="Image Description">
<img class="inline-block avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/6.jpg" alt="Image Description">
<img class="inline-block avatar avatar-rounded" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/7.jpg" alt="Image Description">
<div class="hs-dropdown relative inline-flex" data-hs-dropdown-placement="top-left">
    <button type="button" id="hs-dropdown-avatar-more" class="inline-block avatar avatar-rounded hs-dropdown-toggle  items-center justify-center avatar 
    avatar-rounded bg-gray-200 border-2 border-white font-medium text-gray-700 shadow-sm align-middle hover:bg-gray-300 
    focus:outline-none focus:bg-primary focus:text-white focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary 
    transition-all text-sm dark:bg-bodybg2 dark:hover:bg-black/30 dark:border-white/10 dark:text-white/70 dark:hover:text-white 
    dark:focus:bg-primary dark:focus:text-white dark:focus:ring-offset-white/10">
    <span class="font-medium leading-none">9+</span>
    </button>
    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mb-2 min-w-[15rem]
    bg-white shadow-md rounded-sm p-2 dark:bg-bodybg2 dark:border dark:border-white/10 dark:divide-white/10">
    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-sm text-sm text-defaulttextcolor hover:bg-gray-100 dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300" href="javascript:void(0);">
        Chris Lynch
    </a>
    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-sm text-sm text-defaulttextcolor hover:bg-gray-100 dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300" href="javascript:void(0);">
        Maria Guan
    </a>
    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-sm text-sm text-defaulttextcolor hover:bg-gray-100 dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300" href="javascript:void(0);">
        Amil Evara
    </a>
    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-sm text-sm text-defaulttextcolor hover:bg-gray-100 dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300" href="javascript:void(0);">
        Ebele Egbuna
    </a>
    </div>
</div>
</div>

Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xs SM MD LG XL XXL

<span class="avatar avatar-xs m-2 bg-primary">
    xs
</span>
<span class="avatar avatar-sm m-2 bg-secondary">
    SM
</span>
<span class="avatar avatar-md m-2 bg-warning">
    MD
</span>
<span class="avatar avatar-lg m-2 bg-danger">
    LG
</span>
<span class="avatar avatar-xl m-2 bg-success">
    XL
</span>
<span class="avatar avatar-xxl m-2 bg-info">
    XXL
</span>

Stacked Avatars

Group of avatars stacked together.


    <div class="avatar-list-stacked">
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/10.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/13.jpg" alt="img">
        </span>
        <a class="avatar bg-primary text-white" href="javascript:void(0);">
            +8
        </a>
    </div>

Rounded Stacked Avatars

Group of avatars stacked together.


    <div class="avatar-list-stacked">
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/8.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/10.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/4.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/13.jpg" alt="img">
        </span>
        <a class="avatar bg-primary avatar-rounded text-white" href="javascript:void(0);">
            +8
        </a>
    </div>

Switcher

Avatars

Michael