@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Avatars</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Components
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Avatars
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Circular avatars
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Square avatars
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Radius avatars
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-1 -->

                            <!-- Start::row-2 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Circular avatars With Top Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span class="absolute top-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Square avatars With Top Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Radius avatars With Top Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-2 -->

                            <!-- Start::row-3 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Circular avatars With Bottom Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Square avatars With Bottom Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Radius avatars With Bottom Status
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-1.5 w-1.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-2.5 w-2.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                        </div>
                                        <div class="relative inline-block">
                                        <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3.5 w-3.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-3 -->

                            <!-- Start::row-4 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Circular Avatars with Displaying a Tooltip
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip hidden sm:inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Square Avatars with Displaying a Tooltip
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip hidden sm:inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Radius Avatars with Displaying a Tooltip
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-xs rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                        <div class="hs-tooltip hidden sm:inline-block">
                                        <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <span
                                            class="absolute bottom-0 ltr:right-0 rtl:left-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
                                            <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">
                                            Maria Wanner is online
                                            </div>
                                        </a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-4-->

                            <!-- Start::row-5 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars with Placeholder Icons
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <span class="inline-block h-6 w-6 bg-gray-100 rounded-full overflow-hidden">
                                        <img src="{{asset('build/assets/img/users/21.jpg')}}" alt="userimg">
                                        </span>

                                        <span class="inline-block h-[2.375rem] w-[2.375rem] bg-gray-100 rounded-full overflow-hidden">
                                        <img src="{{asset('build/assets/img/users/21.jpg')}}" alt="userimg">
                                        </span>

                                        <span class="inline-block h-[2.875rem] w-[2.875rem] bg-gray-100 rounded-full overflow-hidden">
                                        <img src="{{asset('build/assets/img/users/21.jpg')}}" alt="userimg">
                                        </span>

                                        <span class="inline-block h-[3.875rem] w-[3.875rem] bg-gray-100 rounded-full overflow-hidden">
                                        <img src="{{asset('build/assets/img/users/21.jpg')}}" alt="userimg">
                                        </span>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars with Placeholder Initials
                                        </h5>
                                    </div>
                                    <div class="box-body space-x-2 rtl:space-x-reverse sm:space-x-6 space-y-2 last:xl:space-x-0">
                                        <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-600 dark:bg-black/20">
                                        <span class="text-xs font-medium text-white leading-none">AC</span>
                                        </span>

                                        <span
                                        class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-600 dark:bg-black/20">
                                        <span class="text-sm font-medium text-white leading-none">AC</span>
                                        </span>

                                        <span
                                        class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-600 dark:bg-black/20">
                                        <span class="font-medium text-white leading-none">AC</span>
                                        </span>

                                        <span
                                        class="inline-flex items-center justify-center h-[3.875rem] w-[3.875rem] rounded-full bg-gray-600 dark:bg-black/20">
                                        <span class="text-lg font-medium text-white leading-none">AC</span>
                                        </span>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title"> Avatar with Media</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="flex-shrink-0 group block">
                                        <div class="flex items-center">
                                            <img class="inline-block flex-shrink-0 h-[3.875rem] w-[3.875rem] rounded-full"
                                            src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <div class="ltr:ml-3 rtl:mr-3">
                                            <h3 class="font-semibold text-gray-800 dark:text-white">Maria Wanner</h3>
                                            <p class="text-sm font-medium text-gray-500 dark:text-white/70">maria@gmail.com</p>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-5-->

                            <!-- Start::row-6 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-6">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars Stack
                                        </h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="grid gap-10 sm:items-end">
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                        </div>
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                        </div>
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                            <img class="avatar rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img class="avatar rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img class="avatar rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img class="avatar rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                        </div>
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img class="avatar avatar-lg rounded-full hidden sm:inline-block" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-6">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars Stack With Tooltip
                                        </h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="grid gap-10 sm:items-end">
                                        <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 avatar-xs rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        <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 avatar-sm rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        <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="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        <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 avatar-lg rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip hidden sm:inline-block">
                                            <a class="hs-tooltip-toggle relative inline-block" href="javascript:void(0);">
                                                <img class="avatar avatar-lg rounded-full" src="{{asset('build/assets/img/users/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">
                                                Maria Wanner
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-6-->

                            <!-- Start::row-7 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xxl:col-span-6">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars Grid
                                        </h5>
                                    </div>
                                    <div class="box-body">
                                        <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 rounded-full"
                                            src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/7.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img
                                            class="avatar rounded-full"
                                            src="{{asset('build/assets/img/users/9.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/7.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                            <img
                                                class="avatar rounded-full"
                                                src="{{asset('build/assets/img/users/9.jpg')}}" alt="Image Description">
                                            <span
                                            class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full 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>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars Bodered
                                        </h5>
                                    </div>
                                    <div class="box-body overflow-auto">
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/8.jpg')}}" alt="Image Description">
                                        <img class="hidden sm:inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                        <img class="hidden sm:inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                        <img class="hidden sm:inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/7.jpg')}}" alt="Image Description">
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">
                                        Avatars With Dropdown
                                        </h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/8.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                        <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="{{asset('build/assets/img/users/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="hs-dropdown-toggle inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full 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-black/20 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-bgdark 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-gray-800 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-gray-800 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-gray-800 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-gray-800 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>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-7-->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

@endsection