- کامپوننت ها
- خط زمانی
پروفایل
کدToday
لوری فاکس
5 ثانیه
سبک پرطرفدار
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Justin Cross
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">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>
پایه
کد10:00
گزارش های سرور به روز شد
25 دقیقه پیش
12:45
فایل های پشتیبان EOD
2 hrs ago
14:00
ارسال نامه به HR و Admin
4 hrs ago
16:00
تماس کنفرانسی با مدیر بازاریابی.
6 hrs ago
17:00
دریافت مستندات ازسارا
9 hrs ago
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]">فایل های پشتیبان 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]">ارسال نامه به HR و 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 mins ago
تماس کنفرانسی با مدیر بازاریابی.
10:00
2 hrs ago
سرور با موفقیت راه اندازی مجدد شد
11:00
4 hrs ago
فایل های پشتیبان EOD
12:00
6 hrs ago
دریافت مستندات از سارا
01:00
9 hrs ago
دانلود فایل 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">فایل های پشتیبان 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>
© . تمام حقوق مادی و معنوی محفوظ است.