<!-- 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" > Team Members </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);" > Pages <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" > Team Members </li> </ol> </div> <!-- Page Header Close --> <!-- Start::row-1 --> <div class="grid grid-cols-12 gap-6"> <div class="col-span-12"> <div class="box"> <div class="box-body"> <div class="lg:grid grid-cols-12 gap-6 space-y-6 lg:space-y-0"> <div class="col-span-12 lg:col-span-4"> <div class="relative max-w-xs"> <label for="hs-table-search" class="sr-only">Search</label> <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4" > <i class="ti ti-search"></i> </div> <input type="text" name="hs-table-search" id="hs-table-search" class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input" placeholder="Enter Your Text" /> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="text-center max-w-xs lg:mx-auto"> <nav class="flex justify-center space-x-3 rtl:space-x-reverse" aria-label="Tabs" role="tablist" > <button type="button" class="w-full hs-tab-active:!bg-primary hs-tab-active:!text-white dark:hs-tab-active:border-b-white/10 -mr-px p-2 items-center bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 active" id="tab-1" data-hs-tab="#tab-style-1" aria-controls="tab-style-1" role="tab" > All Team Members </button> <button type="button" class="w-full hs-tab-active:!bg-primary hs-tab-active:!text-white dark:hs-tab-active:border-b-white/10 ltr:-ml-px rtl:-mr-px p-2 items-center bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300" id="tab-2" data-hs-tab="#tab-style-2" aria-controls="tab-style-2" role="tab" > My Team Members </button> </nav> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="flex space-x-3 rtl:space-x-reverse lg:justify-end team-right"> <ng-select class="ti-form-select" name="team-choice" id="team-choice" placeholder="Categories" > <ng-option value="0" selected>Categories</ng-option> <ng-option value="1">UI Team</ng-option> <ng-option value="2">Java Developers</ng-option> <ng-option value="3">Networking Team</ng-option> <ng-option value="4">FullStack Developers</ng-option> <ng-option value="5">React Developers</ng-option> </ng-select> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="team-add-btn m-0 hs-tooltip-toggle ti-btn ti-btn-primary" > <i class="ti ti-circle-plus text-xl leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Add New Team Member </span> </a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End::row-1 --> <!-- Start::row-2 --> <div class="grid grid-cols-12 gap-6"> <div class="col-span-12"> <div class="ti-tab-content"> <div id="tab-style-1" role="tabpanel" aria-labelledby="tab-1"> <section class="mb-6"> <div class="flex flex-wrap"> <div class="w-full px-4"> <div class="mx-auto max-w-lg text-center"> <h2 class="text-2xl font-bold">Team Members</h2> <p class="text-gray-500 dark:text-white/70 text-xs"> Quod itaque fuga amet, id fugiat ratione assumenda saepe magni quae voluptatibus inventore ullam excepturi possimus eligendi minus labore. </p> </div> </div> </div> </section> <div class="grid grid-cols-12 gap-6"> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/5.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Socrates Itumay</h2> <p class="text-xs text-gray-500 dark:text-white/70"> socratesItumay@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >Founder & CEO</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/10.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Eos Tempor</h2> <p class="text-xs text-gray-500 dark:text-white/70"> eostempor@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-secondary/20 text-secondary" >Director</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/2.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Airi Satou</h2> <p class="text-xs text-gray-500 dark:text-white/70"> airisatou@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-warning/20 text-warning" >Hr</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/11.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Et Kasd</h2> <p class="text-xs text-gray-500 dark:text-white/70"> etkasd@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-info/20 text-info" >Manager</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/3.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Anderson Itumay</h2> <p class="text-xs text-gray-500 dark:text-white/70"> andersonitumay@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-danger/20 text-danger" >Team Lead</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/4.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Samantha Paul</h2> <p class="text-xs text-gray-500 dark:text-white/70"> samanthapaul@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >Sr.UI Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/15.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Mc Greggor</h2> <p class="text-xs text-gray-500 dark:text-white/70"> mcgreggor@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-success/20 text-success" >Java Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/6.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Emiley Jackson</h2> <p class="text-xs text-gray-500 dark:text-white/70"> emileyjackson@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >Full Stack Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/9.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Nicholas Sams</h2> <p class="text-xs text-gray-500 dark:text-white/70"> nicholassams@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-secondary/20 text-secondary" >Networking</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/11.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Pope Johnson</h2> <p class="text-xs text-gray-500 dark:text-white/70"> popejohnson@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-info/20 text-info" >React Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/18.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Megan Fox</h2> <p class="text-xs text-gray-500 dark:text-white/70"> meganfox@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >UI Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/20.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Dolor Dlita</h2> <p class="text-xs text-gray-500 dark:text-white/70"> dolordlita@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-success/20 text-success" >Jr.Java Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> </div> </div> <div id="tab-style-2" class="hidden" role="tabpanel" aria-labelledby="tab-2" > <section class="mb-6"> <div class="-mx-4 flex flex-wrap"> <div class="w-full px-4"> <div class="mx-auto max-w-lg text-center"> <h2 class="text-2xl font-bold">Our Team Members</h2> <p class="text-gray-500 dark:text-white/70 text-xs"> Quod itaque fuga amet, id fugiat ratione assumenda saepe magni quae voluptatibus inventore ullam excepturi possimus eligendi minus labore. </p> </div> </div> </div> </section> <div class="grid grid-cols-12 gap-6"> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/3.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Anderson Itumay</h2> <p class="text-xs text-gray-500 dark:text-white/70"> andersonitumay@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-danger/20 text-danger" >Team Lead</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/4.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Samantha Paul</h2> <p class="text-xs text-gray-500 dark:text-white/70"> samanthapaul@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >Sr.UI Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/15.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Mc Greggor</h2> <p class="text-xs text-gray-500 dark:text-white/70"> mcgreggor@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-success/20 text-success" >Java Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/6.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Emiley Jackson</h2> <p class="text-xs text-gray-500 dark:text-white/70"> emileyjackson@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >Full Stack Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/9.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Nicholas Sams</h2> <p class="text-xs text-gray-500 dark:text-white/70"> nicholassams@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-secondary/20 text-secondary" >Networking</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/11.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Pope Johnson</h2> <p class="text-xs text-gray-500 dark:text-white/70"> popejohnson@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-info/20 text-info" >React Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/18.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Megan Fox</h2> <p class="text-xs text-gray-500 dark:text-white/70"> meganfox@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary" >UI Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"> <div class="box overflow-hidden mb-0"> <div class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full" > <img src="./assets/img/png-images/2.png" alt="" class="w-full h-32" /> </div> <div class="box-body"> <div class="justify-center text-center relative"> <a class="relative inline-block mt-8" routerLink="/profile/home"> <img src="./assets/img/users/20.jpg" class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10" alt="user-img" /> <span class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none" ><i class="ri ri-pencil-line"></i ></span> </a> <div class="space-y-2"> <div class="mt-4"> <h2 class="text-base font-semibold">Dolor Dlita</h2> <p class="text-xs text-gray-500 dark:text-white/70"> dolordlita@abc.com </p> </div> <span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-success/20 text-success" >Jr.Java Developer</span > <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center" > <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-github-line text-lg leading-none"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Github </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-instagram-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Instagram </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-twitter-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Twitter </span> </button> </div> <div class="hs-tooltip ti-main-tooltip"> <button type="button" class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline border-gray-200 dark:border-white/10 text-gray-500 dark:text-white/70 ring-transparent" > <i class="ri ri-linkedin-line text-lg leading-none" ></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Linkedin </span> </button> </div> </div> </div> <a aria-label="anchor" href="javascript:void(0);" class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-gray-100 opacity-80 hover:opacity-100 text-base hover:text-yellow-500" ><i class="ri-star-fill"></i ></a> <div class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base" > <button aria-label="button" type="button" class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle" > <i class="ri-more-2-line leading-none text-base text-gray-100" ></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" routerLink="/profile/home" ><i class="ri ri-edit-2-line text-lg"></i>Edit</a > <a class="team-remove ti-dropdown-item" href="javascript:void(0);" ><i class="ri ri-delete-bin-6-line text-lg"></i >Delete</a > </div> </div> </div> </div> <div class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center" > <div class="grid grid-cols-12 gap-6"> <div class="col-span-6 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10" > <a routerLink="/profile/home" class="space-x-3" ><i class="ri-user-line"></i><span>Profile</span></a > </div> <div class="col-span-6 p-3"> <a routerLink="/page/contacts" class="space-x-3" ><i class="ri-message-3-line"></i><span>Chat</span></a > </div> </div> </div> </div> </div> </div> </div> </div> <nav class="flex justify-end items-center space-x-2 rtl:space-x-reverse my-4" > <a class="w-10 h-10 text-gray-500 dark:text-white/70 bg-gray-200 dark:bg-bgdark hover:text-primary p-4 inline-flex items-center gap-2 rounded-full" href="javascript:void(0);" > <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> <a class="w-10 h-10 bg-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);" aria-current="page" >1</a > <a class="w-10 h-10 bg-gray-200 dark:bg-bgdark text-gray-500 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);" >2</a > <a class="w-10 h-10 bg-gray-200 dark:bg-bgdark text-gray-500 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);" >3</a > <a class="w-10 h-10 text-gray-500 dark:text-white/70 bg-gray-200 dark:bg-bgdark hover:text-primary p-4 inline-flex items-center gap-2 rounded-full" href="javascript:void(0);" > <span class="sr-only">Next</span> <span aria-hidden="true">»</span> </a> </nav> </div> </div> <!-- End::row-2 -->