<app-page-header
title="Timeline"
title1="Timeline"
activeitem="Pages"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<div class="box">
<div class="box-header">
<h5 class="box-title">Timeline -01</h5>
</div>
<div class="box-body">
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/1.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Elida Distefa</span>
added a comment to
<span class="text-dark dark:text-white">Anderson Itumay</span>
post
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
Today, 04:30 PM
</p>
</div>
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="avatar avatar-xs rounded-full"
src="./assets/img/users/1.jpg"
alt="Image Description"
/>
<img
class="avatar avatar-xs rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<img
class="avatar avatar-xs rounded-full"
src="./assets/img/users/2.jpg"
alt="Image Description"
/>
<img
class="avatar avatar-xs rounded-full"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/3.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Samantha Melon</span>
added a 😎 reaction to
<span class="text-dark dark:text-white">Anderson Itumay</span>
post
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
Today, 04:30 PM
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/2.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Samantha Melon</span>
like an Image
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
Today, 05:45 PM
</p>
</div>
<div>
<img
src="./assets/img/gallery/2.jpg"
class="avatar avatar-lg rounded-sm"
alt="profile-img"
/>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/15.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Dennis Trexy</span>
Shared an image
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
yesterday, 10:20 am
</p>
</div>
<div class="space-y-3">
<p class="text-xs text-gray-500 dark:text-white/70">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nostrum sit consequuntur quia aperiam quibusdam rerum ut! Id
ducimus nobis rerum modi veniam odit totam rem asperiores
adipisci, sed quia voluptas?
</p>
<img
src="./assets/img/gallery/5.jpg"
class="avatar avatar-lg rounded-sm"
alt="profile-img"
/>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/21.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Anesthesia</span>
commented on today's meeting
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
yesterday, 05:06 pm
</p>
</div>
<div
class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm"
>
<p class="text-xs text-gray-500 dark:text-white/70">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nostrum sit consequuntur quia aperiam quibusdam rerum ut! Id
ducimus nobis rerum modi veniam odit totam rem asperiores
adipisci, sed quia voluptas?
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div
class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"
></div>
</div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px] leading-[2.3] text-gray-800 dark:text-gray-800"
>
H
</div>
</div>
<div class="flex w-full pb-8">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Harvey Mattos</span>
Followed You
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
03-12-20222, 12:06 pm
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="mx-auto relative">
<div class="h-full w-6 flex items-center justify-center"></div>
<div
class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]"
>
<img
src="./assets/img/users/15.jpg"
class="rounded-full"
alt="timeline-img"
/>
</div>
</div>
<div class="flex w-full">
<div
class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3"
>
<div class="sm:flex">
<h3 class="my-auto text-gray-500 dark:text-white/70">
<span class="text-dark dark:text-white">Anesthesia</span> 5
Days left for Montly submission of progress report
</h3>
<p
class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs"
>
02-12-2022, 6:20 pm
</p>
</div>
<div
class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm"
>
<p class="text-xs text-gray-500 dark:text-white/70 mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nostrum sit consequuntur quia aperiam quibusdam rerum ut!
</p>
<p class="text-xs text-gray-500 dark:text-white/70">
Lorem ipsum dolor sit amet consectetur adipisicing elit.veniam
odit totam rem asperiores adipisci, sed quia voluptas?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12">
<div class="box">
<div class="box-header">
<h5 class="box-title">Timeline -02</h5>
</div>
<div class="box-body">
<div class="relative">
<div class="timeline-start"></div>
<div class="timeline-line"></div>
<div class="timeline">
<div class="timeline-main">
<div class="timeline-left">
<div class="timeline-body">
<div class="box">
<div class="box-body p-4">
<h6 class="font-semibold text-base mb-2">
Marsha Mellow updated his status
</h6>
<p class="text-xs text-gray-500 dark:text-white/70">
Nonumy erat nonumy dolores duo ea sit, ipsum sed amet
aliquyam magna kasd at. Dolor erat sit sed sea et dolor,
justo dolor ipsum dolore voluptua. Sed ipsum sed.
</p>
</div>
<div class="box-footer bg-transparent p-4">
<div
class="sm:space-y-0 space-y-2 sm:flex items-center justify-between"
>
<div
class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse"
>
<div class="flex">
<img
class="avatar avatar-sm ring-0 rounded-full"
src="./assets/img/users/2.jpg"
alt="avatar"
/>
</div>
<div>
<p
class="text-slate-700 font-semibold text-sm dark:text-white"
>
Json Taylor
</p>
<p class="text-xs text-gray-500 dark:text-white/70">
20 min ago
</p>
</div>
</div>
<div
class="space-x-0 sm:space-y-2 space-y-1 sm:space-x-2 text-end"
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-heart-line"></i
><span class="my-2">30</span></a
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-thumb-up-line"></i
><span class="my-2">25k</span></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-warning text-white timeline-icon">
<i class="ri ri-mail-line text-lg leading-none"></i>
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-main">
<div class="timeline-right">
<div class="timeline-body">
<div class="box">
<div class="box-body p-4">
<h6 class="font-semibold text-base mb-2">Job Meeting</h6>
<p class="text-xs text-gray-500 dark:text-white/70">
Invidunt dolor justo gubergren sit voluptua ipsum lorem
sanctus, justo dolores dolor dolore stet justo dolor.
Eos ipsum rebum diam..
</p>
</div>
<div class="box-footer bg-transparent p-4">
<div
class="sm:space-y-0 space-y-2 sm:flex items-center justify-between"
>
<div
class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse"
>
<div class="flex">
<img
class="avatar avatar-sm ring-0 rounded-full"
src="./assets/img/users/1.jpg"
alt="avatar"
/>
</div>
<div>
<p
class="text-slate-700 font-semibold text-sm dark:text-white"
>
Anderson Itumay
</p>
<p class="text-xs text-gray-500 dark:text-white/70">
11 Dec 2022
</p>
</div>
</div>
<div
class="space-x-0 sm:space-y-2 space-y-1 sm:space-x-2 text-end"
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-heart-line"></i
><span class="my-2">30</span></a
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-thumb-up-line"></i
><span class="my-2">25k</span></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-secondary text-white timeline-icon">
<i class="ri-briefcase-4-line text-lg leading-none"></i>
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-main">
<div class="timeline-left">
<div class="timeline-body">
<div class="box">
<div class="box-body p-4">
<h6 class="font-semibold text-base mb-2">
Clark Kent posted on timeline
</h6>
<p class="text-xs text-gray-500 dark:text-white/70">
Accusam et et stet invidunt at duo, ipsum no takimata
est eos magna dolore sed, amet diam sea no diam.
</p>
</div>
<div class="box-footer bg-transparent p-4">
<div
class="sm:space-y-0 space-y-2 sm:flex items-center justify-between"
>
<div
class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse"
>
<div class="flex">
<img
class="avatar avatar-sm ring-0 rounded-full"
src="./assets/img/users/21.jpg"
alt="avatar"
/>
</div>
<div>
<p
class="text-slate-700 font-semibold text-sm dark:text-white"
>
Harvey Mattos
</p>
<p class="text-xs text-gray-500 dark:text-white/70">
11 Dec 2022
</p>
</div>
</div>
<div
class="space-x-0 sm:space-y-2 space-y-1 sm:space-x-2 text-end"
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-heart-line"></i
><span class="my-2">30</span></a
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-thumb-up-line"></i
><span class="my-2">25k</span></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-danger text-white timeline-icon">
<span class="text-lg leading-none">HM</span>
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-main">
<div class="timeline-right">
<div class="timeline-body">
<div class="box">
<div class="box-body p-4">
<h6 class="font-semibold text-base mb-2">
Shady Tree send you a post
</h6>
<p class="text-xs text-gray-500 dark:text-white/70">
Dolore justo lorem vero sed et takimata sit no dolore
dolores, elitr eos et dolor consetetur sed sanctus.
Ipsum amet elitr lorem clita et dolor. Kasd diam ea
dolor sit accusam gubergren no kasd. Ea amet et sed
takimata kasd,.
</p>
</div>
<div class="box-footer bg-transparent p-4">
<div
class="sm:space-y-0 space-y-2 sm:flex items-center justify-between"
>
<div
class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse"
>
<div class="flex">
<img
class="avatar ring-0 rounded-full"
src="./assets/img/users/15.jpg"
alt="avatar"
/>
</div>
<div>
<p
class="text-slate-700 font-semibold text-sm dark:text-white"
>
Anesthesia
</p>
<p class="text-xs text-gray-500 dark:text-white/70">
9 Dec 2022
</p>
</div>
</div>
<div
class="space-x-0 sm:space-y-2 space-y-1 sm:space-x-2 text-end"
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-heart-line"></i
><span class="my-2">30</span></a
>
<a
href="javascript:void(0);"
class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex me-2"
><i class="text-xs ri ri-thumb-up-line"></i
><span class="my-2">25k</span></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-danger text-white timeline-icon">
<img
class="avatar ring-0 rounded-full"
src="./assets/img/users/15.jpg"
alt="avatar"
/>
</div>
</div>
</div>
<div class="timeline-end"></div>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->