لاین وان - Timeline Component

تایم‌لاین ساده

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
ویدیو اضافه شد
1 ساعت پیش

مورِس کلارک یک ویدیوی جدید اضافه کرد
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline max-w-sm">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-primary dark:bg-accent"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            ویدیو اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک یک ویدیوی جدید اضافه کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-success"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-warning"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-error"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

تایم‌لاین با خطوط فاصله

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
ویدیو اضافه شد
1 ساعت پیش

مورِس کلارک یک ویدیوی جدید اضافه کرد
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline line-space max-w-sm">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-primary dark:bg-accent"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            ویدیو اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک یک ویدیوی جدید اضافه کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-success"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-warning"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-error"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

نقطه بیرونی

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
ویدیو اضافه شد
1 ساعت پیش

مورِس کلارک یک ویدیوی جدید اضافه کرد
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline line-space max-w-sm">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border-2 border-primary dark:border-accent"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            ویدیو اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک یک ویدیوی جدید اضافه کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border-2 border-success"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border-2 border-warning"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full border-2 border-error"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

تایم‌لاین با انیمیشن پینگ

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
ویدیو اضافه شد
1 ساعت پیش

مورِس کلارک یک ویدیوی جدید اضافه کرد
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline max-w-sm">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-primary dark:bg-accent"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            ویدیو اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک یک ویدیوی جدید اضافه کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-success">
        <span
          class="inline-flex h-full w-full animate-ping rounded-full bg-success opacity-80"
        ></span>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-warning"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-error"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

پینگ و خطوط فاصله

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
ویدیو اضافه شد
1 ساعت پیش

مورِس کلارک یک ویدیوی جدید اضافه کرد
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline line-space max-w-sm">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full bg-accent dark:bg-accent"
      ></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            ویدیو اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک یک ویدیوی جدید اضافه کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-success">
        <span
          class="inline-flex h-full w-full animate-ping rounded-full bg-success opacity-80"
        ></span>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-warning"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item-point rounded-full bg-error"></div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

تایم‌لاین پیشرفته

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
تصاویر اضافه شد
1 ساعت پیش

مورِس کلارک گالری تصاویر جدید اضافه کرد

دسته‌بندی: #تگ #دسته‌بندی
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
File_final.fig
UI/UX CRM داشبورد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد

اعضا:

jd
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline max-w-sm [--size:1.5rem]">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-secondary dark:bg-navy-700 dark:text-secondary-light"
      >
        <i class="fa fa-user-edit text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
        <div class="avatar mt-2 size-20">
          <img
            class="mask is-squircle"
            src="images/avatar/avatar-19.jpg"
            alt="آواتار"
          />
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-primary dark:bg-navy-700 dark:text-accent"
      >
        <i class="fa-solid fa-image text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تصاویر اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک گالری تصاویر جدید اضافه کرد</p>
        <div class="mt-4 grid grid-cols-3 gap-3">
          <img
            class="rounded-lg"
            src="images/object/object-1.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-2.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-3.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-4.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-5.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-6.jpg"
            alt="عکس"
          />
        </div>
        <div class="mt-4">
          <span class="font-medium text-slate-600 dark:text-navy-100">
            دسته‌بندی:
          </span>

          <a
            href="#"
            class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
          >
            #تگ
          </a>

          <a
            href="#"
            class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
          >
            #دسته‌بندی
          </a>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-success dark:bg-navy-700"
      >
        <i class="fa fa-leaf text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
        <a
          href="#"
          class="inline-flex items-center  space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          <span>File_final.fig</span>
        </a>
        <div class="pt-2">
          <a
            href="#"
            class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
          >
            UI/UX
          </a>

          <a
            href="#"
            class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
          >
            CRM
          </a>

          <a
            href="#"
            class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
          >
            داشبورد
          </a>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700"
      >
        <i class="fa fa-project-diagram text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
        <div>
          <p class="text-xs text-slate-400 dark:text-navy-300">اعضا:</p>
          <div class="mt-2 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="آواتار"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700"
      >
        <i class="fa fa-history text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

تایم‌لاین پیشرفته

کد

تایم‌لاین یک لیست از رویدادها را به ترتیب زمانی نمایش می‌دهد. برای جزییات بیشتر استفاده کد را مشاهده کنید.

تغییر عکس کاربر
12 دقیقه پیش

جان دو تصویر پروفایل خود را تغییر داد
تصاویر اضافه شد
1 ساعت پیش

مورِس کلارک گالری تصاویر جدید اضافه کرد

دسته‌بندی: #تگ #دسته‌بندی
طراحی تکمیل شد
3 ساعت پیش

رابرت نولان طراحی برنامه CRM را تکمیل کرد
File_final.fig
UI/UX CRM داشبورد
نمودار ER
1 روز پیش

تیم اپلیکیشن ER Diagram را تکمیل کرد

اعضا:

jd
گزارش هفتگی
1 روز پیش

گزارش هفتگی بارگذاری شد

                
  <ol class="timeline line-space max-w-sm [--size:1.5rem]">
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-secondary dark:bg-navy-700 dark:text-secondary-light"
      >
        <i class="fa fa-user-edit text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تغییر عکس کاربر
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >12 دقیقه پیش</span
          >
        </div>
        <p class="py-1">جان دو تصویر پروفایل خود را تغییر داد</p>
        <div class="avatar mt-2 size-20">
          <img
            class="mask is-squircle"
            src="images/avatar/avatar-19.jpg"
            alt="آواتار"
          />
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-primary dark:bg-navy-700 dark:text-accent"
      >
        <i class="fa-solid fa-image text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            تصاویر اضافه شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 ساعت پیش</span
          >
        </div>
        <p class="py-1">مورِس کلارک گالری تصاویر جدید اضافه کرد</p>
        <div class="mt-4 grid grid-cols-3 gap-3">
          <img
            class="rounded-lg"
            src="images/object/object-1.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-2.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-3.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-4.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-5.jpg"
            alt="عکس"
          />
          <img
            class="rounded-lg"
            src="images/object/object-6.jpg"
            alt="عکس"
          />
        </div>
        <div class="mt-4">
          <span class="font-medium text-slate-600 dark:text-navy-100">
            دسته‌بندی:
          </span>

          <a
            href="#"
            class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
          >
            #تگ
          </a>

          <a
            href="#"
            class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
          >
            #دسته‌بندی
          </a>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-success dark:bg-navy-700"
      >
        <i class="fa fa-leaf text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            طراحی تکمیل شد
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >3 ساعت پیش</span
          >
        </div>
        <p class="py-1">
          رابرت نولان طراحی برنامه CRM را تکمیل کرد
        </p>
        <a
          href="#"
          class="inline-flex items-center  space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          <span>File_final.fig</span>
        </a>
        <div class="pt-2">
          <a
            href="#"
            class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
          >
            UI/UX
          </a>

          <a
            href="#"
            class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
          >
            CRM
          </a>

          <a
            href="#"
            class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
          >
            داشبورد
          </a>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700"
      >
        <i class="fa fa-project-diagram text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            نمودار ER
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">تیم اپلیکیشن ER Diagram را تکمیل کرد</p>
        <div>
          <p class="text-xs text-slate-400 dark:text-navy-300">اعضا:</p>
          <div class="mt-2 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="آواتار"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="آواتار"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div
        class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700"
      >
        <i class="fa fa-history text-tiny"></i>
      </div>
      <div class="timeline-item-content flex-1 pr-4 sm:pr-8">
        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
          <p
            class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
          >
            گزارش هفتگی
          </p>
          <span class="text-xs text-slate-400 dark:text-navy-300"
            >1 روز پیش</span
          >
        </div>
        <p class="py-1">گزارش هفتگی بارگذاری شد</p>
      </div>
    </li>
  </ol>

پروفایل

پیام‌ها

تیم

فعالیت‌ها

تنظیمات

اعلان‌ها

کارت‌های بانکی

برنامه‌های سنجاق‌شده

بازار بورس

BTC

SOL

آخرین اخبار

تنظیمات

تایم‌لاین

تایم‌لاین ساده

تایم‌لاین با خطوط فاصله

نقطه بیرونی

تایم‌لاین با انیمیشن پینگ

پینگ و خطوط فاصله

تایم‌لاین پیشرفته

تایم‌لاین پیشرفته