- Components
- Timeline
Profile
CodeToday
Laurie Fox
5 sec
Trending Style
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Justin Cross
45 min
Nature Photography
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Laurie Fox
5 sec
Create new Project
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<!-- profile -->
<div class="mb-5">
<p class="text-white-dark font-bold mb-5 text-base">Today</p>
<div class="sm:flex">
<div class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block">
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
</div>
<div class="flex-1">
<h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
<p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
<div class="mt-4 sm:mt-7 mb-16">
<svg> ... </svg>
<h6 class="inline-block font-bold mb-2 text-lg">Trending Style</h6>
<p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-1.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-2.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-4.jpg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
</div>
</div>
</div>
</div>
<div class="sm:flex">
<div class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block">
<img src="/assets/images/profile-7.jpeg" alt="image" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
</div>
<div class="flex-1">
<h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Justin Cross</h4>
<p class="text-center ltr:sm:text-left rtl:sm:text-right">45 min</p>
<div class="mt-4 sm:mt-7 mb-16">
<svg> ... </svg>
<h6 class="inline-block font-bold mb-2 text-lg">Nature Photography</h6>
<p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="ltr:pl-8 rtl:pr-8 grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-8 gap-3 mt-6">
<img src="/assets/images/drag-1.jpeg" alt="image" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-4.jpg" alt="image" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
</div>
</div>
</div>
</div>
<div class="sm:flex">
<div class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block">
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
</div>
<div class="flex-1">
<h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
<p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
<div class="mt-4 sm:mt-7 mb-16">
<svg> ... </svg>
<h6 class="inline-block font-bold mb-2 text-lg">Create new Project</h6>
<p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-1.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-2.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
<img src="/assets/images/drag-4.jpg" alt="image" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none" />
</div>
</div>
</div>
</div>
</div>
Modern
Code-
Front-End Framework
Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.
-
Web Development
Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.
-
Theme Development
Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.
-
Plugin Development
Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.
<!-- modern -->
<ul class="relative py-12 before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:bottom-0 before:left-1/2 before:top-0 before:w-[3px] before:-ml-[1.5px] max-w-[900px] mx-auto table">
<li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
<div class="hidden sm:block absolute bg-info border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
<div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden">
<div>
<img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
</div>
<div class="p-5">
<h4 class="mb-3 text-info text-lg font-semibold">Front-End Framework</h4>
<p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
<p><button type="button" class="btn btn-info">Read more</button></p>
</div>
</div>
</li>
<li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
<div class="hidden sm:block absolute bg-primary border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
<div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden">
<div>
<img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
</div>
<div class="p-5">
<h4 class="mb-3 text-primary text-lg font-semibold">Web Development</h4>
<p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
<p><button type="button" class="btn btn-primary">Read more</button></p>
</div>
</div>
</li>
<li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
<div class="hidden sm:block absolute bg-success border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
<div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden">
<div>
<img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
</div>
<div class="p-5">
<h4 class="mb-3 text-success text-lg font-semibold">Theme Development</h4>
<p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
<p><button type="button" class="btn btn-success">Read more</button></p>
</div>
</div>
</li>
<li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
<div class="hidden sm:block absolute bg-danger border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
<div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden">
<div>
<img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
</div>
<div class="p-5">
<h4 class="mb-3 text-danger text-lg font-semibold">Plugin Development</h4>
<p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
<p><button type="button" class="btn btn-danger">Read more</button></p>
</div>
</div>
</li>
</ul>
Basic
Code10:00
Updated Server Logs
25 mins ago
12:45
Backup Files EOD
2 hrs ago
14:00
Send Mail to HR and Admin
4 hrs ago
16:00
Conference call with Marketing Manager.
6 hrs ago
17:00
Collected documents from Sara
9 hrs ago
16:00
Server rebooted successfully
8 hrs ago
<!-- basic -->
<div class="max-w-[900px] mx-auto">
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">10:00</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-primary after:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Updated Server Logs</p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">25 mins ago</p>
</div>
</div>
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">12:45</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-secondary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-secondary after:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Backup Files EOD</p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">2 hrs ago</p>
</div>
</div>
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">14:00</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-success before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-success after:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Send Mail to HR and Admin</p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">4 hrs ago</p>
</div>
</div>
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-danger before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-danger after:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Conference call with Marketing Manager.</p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">6 hrs ago</p>
</div>
</div>
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">17:00</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-warning before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-warning after:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Collected documents from <a href="javascript:void(0);">Sara</a></p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">9 hrs ago</p>
</div>
</div>
<div class="flex">
<p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
<div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-info before:rounded-full"></div>
<div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Server rebooted successfully</p>
<p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">8 hrs ago</p>
</div>
</div>
</div>
With Images
Code09:00
25 mins ago
Conference call with Marketing Manager.
10:00
2 hrs ago
Server rebooted successfully
11:00
4 hrs ago
Backup Files EOD
12:00
6 hrs ago
Collected documents from Sara
01:00
9 hrs ago
PDF file Download
<!-- images -->
<div class="max-w-[900px] mx-auto text-center ltr:sm:text-left rtl:sm:text-right space-y-3 sm:space-y-0">
<div class="sm:flex items-center">
<p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">09:00</p>
<div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full">
<img src="/assets/images/profile-16.jpeg" alt="image" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
</div>
<p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">25 mins ago</p>
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Conference call with Marketing Manager.</p>
</div>
<div class="sm:flex items-center">
<p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">10:00</p>
<div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full">
<img src="/assets/images/profile-1.jpeg" alt="image" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
</div>
<p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">2 hrs ago</p>
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Server rebooted successfully</p>
</div>
<div class="sm:flex items-center">
<p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">11:00</p>
<div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full">
<img src="/assets/images/profile-2.jpeg" alt="image" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
</div>
<p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">4 hrs ago</p>
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Backup Files EOD</p>
</div>
<div class="sm:flex items-center">
<p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">12:00</p>
<div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full">
<img src="/assets/images/profile-3.jpeg" alt="image" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
</div>
<p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">6 hrs ago</p>
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Collected documents from Sara</p>
</div>
<div class="sm:flex items-center">
<p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">01:00</p>
<div class="p-2.5 relative">
<img src="/assets/images/profile-4.jpeg" alt="image" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
</div>
<p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">9 hrs ago</p>
<p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">PDF file Download</p>
</div>
</div>
© . Vristo All rights reserved.