<div class="flex justify-end">
  <div class="timeline-1 flex w-1/2 flex-col gap-10">
    <p>Success</p>
    <p>Warning</p>
    <p>Error</p>
  </div>
</div>
                  

<div class="flex justify-center">
<div class="timeline-2 flex w-full flex-col gap-10">
  <p class="right">Success</p>
  <p class="left">Warning</p>
  <p class="right">Error</p>
</div>
</div>
                  

<div class="flex justify-center">
  <div class="timeline-2 flex w-full flex-col gap-10">
    <p class="right">Default</p>
    <p class="left primary">Primary</p>
    <p class="right secondary">Secondary</p>
    <p class="left info">Info</p>
    <p class="right success">Success</p>
    <p class="left warning">Warning</p>
    <p class="right error">Error</p>
  </div>
</div>
                  

<div class="flex justify-center">
  <div class="timeline-3 flex w-full flex-col gap-10">
    <p class="right">Default</p>
    <p class="left primary">Primary</p>
    <p class="right secondary">Secondary</p>
    <p class="left info">Info</p>
    <p class="right success">Success</p>
    <p class="left warning">Warning</p>
    <p class="right error">Error</p>
  </div>
</div>
                  

<div class="flex justify-center">
  <div class="timeline-3 flex w-full flex-col gap-10">
    <div class="flex">
      <p class="left text-neutral-300 dark:text-neutral-20">Default</p>
      <p class="font-medium">Default</p>
    </div>
    <div class="flex">
      <p class="left font-medium primary">Primary</p>
      <p class="text-neutral-300 dark:text-neutral-20">Primary</p>
    </div>
    <div class="flex">
      <p class="left text-neutral-300 dark:text-neutral-20 secondary">Secondary</p>
      <p class="font-medium">Secondary</p>
    </div>
    <div class="flex">
      <p class="left font-medium info">Info</p>
      <p class="text-neutral-300 dark:text-neutral-20">Info</p>
    </div>
    <div class="flex">
      <p class="left text-neutral-300 dark:text-neutral-20 success">Success</p>
      <p class="font-medium">Success</p>
    </div>
    <div class="flex">
      <p class="left font-medium warning">Warning</p>
      <p class="text-neutral-300 dark:text-neutral-20">Warning</p>
    </div>
    <div class="flex">
      <p class="left text-neutral-300 dark:text-neutral-20 error after:hidden">Error</p>
      <p class="font-medium">Error</p>
    </div>
  </div>
</div>
                  

<div class="flex flex-col gap-14">
  <div class="f-center gap-3">
    <div class="w-[48%] text-end">
      <p class="m-text mb-1 font-medium">Default</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-neutral-100 text-neutral-0 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-neutral-100">
      <i class="las la-file text-xl"></i>
    </div>
    <div class="w-[48%] self-start">
      <p>09:30 am</p>
    </div>
  </div>

  <div class="f-center gap-3">
    <div class="w-[48%] self-start text-end">
      <p>09:30 am</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-primary-300 text-neutral-0 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-primary-300">
      <i class="las la-image text-xl"></i>
    </div>
    <div class="w-[48%] text-start">
      <p class="m-text mb-1 font-medium">Primary</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>

  <div class="f-center gap-3">
    <div class="w-[48%] text-end">
      <p class="m-text mb-1 font-medium">Secondary</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-secondary-300 text-neutral-0 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-secondary-300">
      <i class="las la-music text-xl"></i>
    </div>
    <div class="w-[48%] self-start">
      <p>09:30 am</p>
    </div>
  </div>

  <div class="f-center gap-3">
    <div class="w-[48%] self-start text-end">
      <p>09:30 am</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-info-300 text-neutral-0 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-info-300">
      <i class="las la-tv text-xl"></i>
    </div>
    <div class="w-[48%] text-start">
      <p class="m-text mb-1 font-medium">Info</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>
  <div class="f-center gap-3">
    <div class="w-[48%] text-end">
      <p class="m-text mb-1 font-medium">Success</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-success-300 text-neutral-0 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-success-300">
      <i class="las la-chart-line text-xl"></i>
    </div>
    <div class="w-[48%] self-start">
      <p>09:30 am</p>
    </div>
  </div>

  <div class="f-center gap-3">
    <div class="w-[48%] self-start text-end">
      <p>09:30 am</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-warning-300 text-neutral-700 after:absolute after:left-1/2 after:top-[110%] after:h-14 after:w-px after:-translate-x-1/2 after:bg-warning-300">
      <i class="lab la-dropbox text-xl"></i>
    </div>
    <div class="w-[48%] text-start">
      <p class="m-text mb-1 font-medium">Warning</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>

  <div class="f-center gap-3">
    <div class="w-[48%] text-end">
      <p class="m-text mb-1 font-medium">Error</p>
      <p class="text-xs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="relative flex size-9 items-center justify-center rounded-full bg-error-300 text-neutral-0">
      <i class="las la-frown text-xl"></i>
    </div>
    <div class="w-[48%] self-start">
      <p>09:30 am</p>
    </div>
  </div>
</div>