- اجزاء
- تایم لاین
پروفایل
نمونه کدامروز
لیلا ستوده
5 ثانیه
سبک پرطرفدار
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
رضا علوی
45 دقیقه
عکاسی از طبیعت
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
سمانه علی پور
5 ثانیه
ایجاد پروژه جدید
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
<!-- 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 -->
<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">بیشتر بخوانید</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">بیشتر بخوانید</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">بیشتر بخوانید</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">بیشتر بخوانید</button></p>
</div>
</div>
</li>
</ul>
ساده
نمونه کد10:00
گزارش های سرور بروز شد
25 دقیقه پیش
12:45
پشتیبان گیری فایل ها
2 ساعت پیش
14:00
ارسال ایمیل برای ادمین
4 ساعت پیش
16:00
کنفرانس تصویری با مدیر بازاریابی.
6 ساعت پیش
17:00
جمع آوری اسناد از بایگانی
9 ساعت پیش
16:00
سرور با موفقیت راه انداری مجدد شد
8 ساعت پیش
<!-- 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]">کنفرانس تصویری با مدیر بازاریابی.</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]">سرور با موفقیت راه اندازی مجدد شد</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>
با تصاویر
نمونه کد09:00
25 دقیقه پیش
کنفرانس تصویری با مدیر بازاریابی.
10:00
2 ساعت پیش
سرور با موفقیت راه اندازی مجدد شد
11:00
4 ساعت پیش
پشتیبان گیری سرور
12:00
6 ساعت پیش
جمع آوری اسناد از بایگانی
01:00
9 ساعت پیش
دانلود فایل PDF
<!-- 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">کنفرانس تصویری با مدیر بازاریابی.</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">سرور با موفقیت راه اندازی مجدد شد</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>
© روشاک