Feed

<!-- Component: User feed -->
<ul aria-label="User feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-8 before:absolute before:top-0 before:left-8 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-8 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane<span class="text-base font-normal text-slate-500"> created a new thread</span></span><span class="text-sm font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class=" text-slate-500">We just released windUI v1.5, which includes a brand new component. An activity feed is a chronological record of system events or user actions. Have a look at the feed page and let me know what you think. Feedback is highly appreciated. </p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-base font-normal text-slate-500"> replied </span></span><span class="text-sm font-normal text-slate-400"> 2 hours ago</span></h4>
      <p class=" text-slate-500">It looks awesome! Good one! The only thing that I would tweak is the spacing in smaller screens. Other than that it looks superb! Really loved the color as well. </p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-base font-normal text-slate-500"> replied </span></span><span class="text-sm font-sm text-slate-400"> 3 hours ago</span></h4>
      <p class=" text-slate-500">Thanks so much 🙏. Your feedback is highly appreciated.</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=13" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Manos Gaitanakis<span class="text-base font-normal text-slate-500"> commented</span></span><span class="text-sm font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class=" text-slate-500">Love it! I really like how the nested feeds are working as well. Is that going to be multi-nested? Or maybe stay in just one level. Also any ides on how I can remove the time stamp from the feeds?</p>
    </div>
  </li>

</ul>
<!-- End User feed -->

<!-- Component: User feed -->
<ul aria-label="User feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane<span class="text-sm font-normal text-slate-500"> created a new thread</span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class="text-sm text-slate-500">We just released windUI v1.5, which includes a brand new component. An activity feed is a chronological record of system events or user actions. Have a look at the feed page and let me know what you think. Feedback is highly appreciated. </p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-sm font-normal text-slate-500"> replied </span></span><span class="text-xs font-normal text-slate-400"> 2 hours ago</span></h4>
      <p class="text-sm text-slate-500">It looks awesome! Good one! The only thing that I would tweak is the spacing in smaller screens. Other than that it looks superb! Really loved the color as well. </p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-sm font-normal text-slate-500"> replied </span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class="text-sm text-slate-500">Thanks so much 🙏. Your feedback is highly appreciated.</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=13" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Manos Gaitanakis<span class="text-sm font-normal text-slate-500"> commented</span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class="text-sm text-slate-500">Love it! I really like how the nested feeds are working as well. Is that going to be multi-nested? Or maybe stay in just one level. Also any ides on how I can remove the time stamp from the feeds?</p>
    </div>
  </li>
</ul>
<!-- End User feed -->

<!-- Component: Nested user feed -->
<ul aria-label="Nested user feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-8 before:absolute before:top-0 before:left-8 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-8 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane<span class="text-base font-normal text-slate-500"> created a new thread</span></span><span class="text-sm font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class=" text-slate-500">We just released windUI v1.5, which includes a brand new component. An activity feed is a chronological record of system events or user actions. Have a look at the feed page and let me know what you think. Feedback is highly appreciated. </p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-base font-normal text-slate-500"> 💚 liked the thread </span></span><span class="text-sm font-normal text-slate-400"> 2 hours ago</span></h4>
    </div>
    <ul role="group" class="relative flex flex-col gap-12 py-12 pl-6 lg:pl-8 after:absolute after:top-12 after:left-6 lg:after:left-8 after:bottom-12 after:border after:-translate-x-1/2 after:border-slate-200 before:absolute before:top-6 before:left-6 lg:before:left-8 before:bottom-6 before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed">
      <li role="article" class="relative pl-6 lg:pl-8 ">
        <div class="flex flex-col flex-1 gap-4">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-base font-normal text-slate-500"> replied </span></span><span class="text-sm font-normal text-slate-400"> 2 hours ago</span></h4>
          <p class=" text-slate-500">Hey john! Did you had a look at the new component? </p>
        </div>
      </li>
      <li role="article" class="relative pl-6 lg:pl-8 ">
        <div class="flex flex-col flex-1 gap-4">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-base font-normal text-slate-500"> replied </span></span><span class="text-sm font-normal text-slate-400"> 2 hours ago</span></h4>
          <p class=" text-slate-500">It looks awesome! Good one! The only thing that I would tweak is the spacing in smaller screens. Other than that it looks superb! Really loved the color as well. </p>
        </div>
      </li>
      <li role="article" class="relative pl-6 lg:pl-8 ">
        <div class="flex flex-col flex-1 gap-4">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-base font-normal text-slate-500"> replied </span></span><span class="text-sm font-sm text-slate-400"> 3 hours ago</span></h4>
          <p class=" text-slate-500">Thanks so much 🙏. Your feedback is highly appreciated.</p>
        </div>
      </li>
    </ul>
  </li>
  <li role="article" class="relative pl-8 ">
    <div class="flex flex-col flex-1 gap-4">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-8 h-8 text-white rounded-full -left-4 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=13" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-lg font-medium leading-8 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Manos Gaitanakis<span class="text-base font-normal text-slate-500"> commented</span></span><span class="text-sm font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class=" text-slate-500">Love it! I really like how the nested feeds are working as well. Is that going to be multi-nested? Or maybe stay in just one level. Also any ides on how I can remove the time stamp from the feeds?</p>
    </div>
  </li>
</ul>
<!-- End Nested user feed -->

<!-- Component: Nested user feed -->
<ul aria-label="Nested user feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane<span class="text-sm font-normal text-slate-500"> created a new thread</span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class="text-sm text-slate-500">We just released windUI v1.5, which includes a brand new component. An activity feed is a chronological record of system events or user actions. Have a look at the feed page and let me know what you think. Feedback is highly appreciated. </p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-sm font-normal text-slate-500"> 💚 liked the thread </span></span><span class="text-xs font-normal text-slate-400"> 2 hours ago</span></h4>
    </div>
    <ul role="group" class="relative flex flex-col gap-12 py-12 pl-6 after:absolute after:top-12 after:left-6 after:bottom-12 after:border after:-translate-x-1/2 after:border-slate-200 before:absolute before:top-6 before:left-6 before:bottom-6 before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed">
      <li role="article" class="relative pl-6 ">
        <div class="flex flex-col flex-1 gap-2">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-sm font-normal text-slate-500"> replied </span></span><span class="text-xs font-normal text-slate-400"> 2 hours ago</span></h4>
          <p class="text-sm text-slate-500">Hey john! Did you had a look at the new component? </p>
        </div>
      </li>
      <li role="article" class="relative pl-6 ">
        <div class="flex flex-col flex-1 gap-2">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=12" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">John langan <span class="text-sm font-normal text-slate-500"> replied </span></span><span class="text-xs font-normal text-slate-400"> 2 hours ago</span></h4>
          <p class="text-sm text-slate-500">It looks awesome! Good one! The only thing that I would tweak is the spacing in smaller screens. Other than that it looks superb! Really loved the color as well. </p>
        </div>
      </li>
      <li role="article" class="relative pl-6 ">
        <div class="flex flex-col flex-1 gap-2">
          <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
            <img src="https://i.pravatar.cc/48?img=1" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
          </a>
          <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Mary Jane <span class="text-sm font-normal text-slate-500"> replied </span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
          <p class="text-sm text-slate-500">Thanks so much 🙏. Your feedback is highly appreciated.</p>
        </div>
      </li>
    </ul>
  </li>
  <li role="article" class="relative pl-6 ">
    <div class="flex flex-col flex-1 gap-2">
      <a href="#" class="absolute z-10 inline-flex items-center justify-center w-6 h-6 text-white rounded-full -left-3 ring-2 ring-white">
        <img src="https://i.pravatar.cc/48?img=13" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <h4 class="flex flex-col items-start text-base font-medium leading-6 lg:items-center md:flex-row text-slate-700"><span class="flex-1">Manos Gaitanakis<span class="text-sm font-normal text-slate-500"> commented</span></span><span class="text-xs font-normal text-slate-400"> 3 hours ago</span></h4>
      <p class="text-sm text-slate-500">Love it! I really like how the nested feeds are working as well. Is that going to be multi-nested? Or maybe stay in just one level. Also any ides on how I can remove the time stamp from the feeds?</p>
    </div>
  </li>
</ul>
<!-- End Nested user feed -->

<!-- Component: Activity feed -->
<ul aria-label="Activity feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-8 before:absolute before:top-0 before:left-8 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-8 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> UI/UX project created </h4>
      <p class="text-sm text-slate-500">13:12pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Task list created for project</h4>
      <p class="text-sm text-slate-500">13:31pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Warning! Project name cannot be empty </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> New user added </h4>
      <p class="text-sm text-slate-500">13:56pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Warning! Project is going to be expired </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Project deleted </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
</ul>
<!-- End Activity feed -->

<!-- Component: Activity feed -->
<ul aria-label="Activity feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> UI/UX project created </h4>
      <p class="text-xs text-slate-500">13:12pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Task list created for project</h4>
      <p class="text-xs text-slate-500">13:31pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Warning! Project name cannot be empty </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> New user added </h4>
      <p class="text-xs text-slate-500">13:56pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Warning! Project is going to be expired </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 -translate-x-1/2 rounded-full text-slate-700 ring-2 ring-white bg-slate-200 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation"></svg>
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Project deleted </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
</ul>
<!-- End Activity feed -->

<!-- Component: Colored Activity feed -->
<ul aria-label="Colored activity feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-8 before:absolute before:top-0 before:left-8 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-8 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> UI/UX project created </h4>
      <p class="text-sm text-slate-500">13:12pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Task list created for project</h4>
      <p class="text-sm text-slate-500">13:31pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-amber-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Warning! Project name cannot be empty </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> New user added </h4>
      <p class="text-sm text-slate-500">13:56pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-amber-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Warning! Project is going to be expired </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-8 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-10 h-10 text-white -translate-x-1/2 bg-pink-500 rounded-full ring-2 ring-white ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-base font-medium text-slate-700"> Project deleted </h4>
      <p class="text-sm text-slate-500">13:32pm</p>
    </div>
  </li>
</ul>
<!-- End Colored Activity feed -->

<!-- Component: Colored Activity feed -->
<ul aria-label="Colored activity feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> UI/UX project created </h4>
      <p class="text-xs text-slate-500">13:12pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Task list created for project</h4>
      <p class="text-xs text-slate-500">13:31pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-amber-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Warning! Project name cannot be empty </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-emerald-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> New user added </h4>
      <p class="text-xs text-slate-500">13:56pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 rounded-full ring-2 ring-white bg-amber-500 ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" role="presentation">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Warning! Project is going to be expired </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 ">
    <span class="absolute left-0 z-10 flex items-center justify-center w-8 h-8 text-white -translate-x-1/2 bg-pink-500 rounded-full ring-2 ring-white ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" role="presentation"></svg>
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
      </svg>
    </span>
    <div class="flex flex-col flex-1 gap-0">
      <h4 class="text-sm font-medium text-slate-700"> Project deleted </h4>
      <p class="text-xs text-slate-500">13:32pm</p>
    </div>
  </li>
</ul>
<!-- End Colored Activity feed -->

<!-- Component: Changelog feed -->
<ul aria-label="Changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200 ">
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v1.2.6 <span class="text-lg font-normal text-slate-500"> - 2023-02-08</span> </h4>
      <p class=" text-slate-500">This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Update several dependencies, including postcss-js.</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v1.2.5 <span class="text-lg font-normal text-slate-500"> - 2023-01-21</span> </h4>
      <p class="text-slate-500">Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Remove outdated focus style fix in Preflight</li>
        <li>Fix error when not using a config file with postcss</li>
        <li>Fix issue with resolveConfig not being importable in Next.js</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v1.2.4 <span class="text-lg font-normal text-slate-500"> - 2023-01-18</span> </h4>
      <p class="text-slate-500">Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the group class. </p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Added utilities for screenreader visibility</li>
        <li>First, last, even, and odd child variants</li>
        <li>Disabled variant</li>
        <li>Visited variant</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Changelog feed -->

<!-- Component: Changelog feed -->
<ul aria-label="Changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 text-sm before:absolute before:top-0 before:left-6 before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200">
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium leading-7 text-emerald-500">v1.2.6 <span class="text-base font-normal text-slate-500"> - 2023-02-08</span> </h4>
      <p class=" text-slate-500">This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Update several dependencies, including postcss-js.</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium text-emerald-500">v1.2.5 <span class="text-base font-normal text-slate-500"> - 2023-01-21</span> </h4>
      <p class=" text-slate-500">Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Remove outdated focus style fix in Preflight</li>
        <li>Fix error when not using a config file with postcss</li>
        <li>Fix issue with resolveConfig not being importable in Next.js</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:z-10 before:left-0 before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium text-emerald-500">v1.2.4 <span class="text-base font-normal text-slate-500"> - 2023-01-18</span> </h4>
      <p class=" text-slate-500">Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the group class.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Added utilities for screenreader visibility</li>
        <li>First, last, even, and odd child variants</li>
        <li>Disabled variant</li>
        <li>Visited variant</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Changelog feed -->

<!-- Component: Changelog feed with images -->
<ul aria-label="Changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:left-6 before:top-0 before:h-full before:-translate-x-1/2 before:border before:border-dashed before:border-slate-200 after:absolute after:bottom-6 after:left-6 after:top-6 after:-translate-x-1/2 after:border after:border-slate-200">
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v2.2.1: Accessibility Improvements <span class="text-lg font-normal text-slate-500"> - 2023-09-03</span></h4>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-03.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">Focused on enhancing accessibility across all components, making the template more user-friendly for people with disabilities. Improved keyboard navigation and screen reader support.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Improved keyboard focus states</li>
        <li>Enhanced ARIA labels for better screen reader support</li>
        <li>Optimized color contrast for better visibility</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v2.1.6: Security Patch <span class="text-lg font-normal text-slate-500"> - 2023-08-01</span></h4>
      <p class="text-slate-500">A security patch addressing vulnerabilities reported in the previous version. It's recommended for all users to update to this version to maintain secure operations.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Fixed CSRF vulnerability in forms</li>
        <li>Updated authentication mechanisms</li>
        <li>Improved session management for enhanced security</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v2.2.3: New Components <span class="text-lg font-normal text-slate-500"> - 2023-10-01</span></h4>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-04.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">Introducing several new components to enhance UI capabilities, including new card designs, tabbed navigation, and progress indicators. These additions allow for more flexibility in building pages.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>New card component with hover effects</li>
        <li>Tabbed navigation for better organization</li>
        <li>Progress indicators for tracking tasks</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Changelog feed with images-->

<!-- Component: Changelog feed with images -->
<ul aria-label="Changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 text-sm before:absolute before:left-6 before:top-0 before:h-full before:-translate-x-1/2 before:border before:border-dashed before:border-slate-200 after:absolute after:bottom-6 after:left-6 after:top-6 after:-translate-x-1/2 after:border after:border-slate-200">
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium leading-7 text-emerald-500">v2.2.1: Accessibility Improvements <span class="text-base font-normal text-slate-500"> - 2023-09-03</span></h4>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-03.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">Focused on enhancing accessibility across all components, making the template more user-friendly for people with disabilities. Improved keyboard navigation and screen reader support.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Improved keyboard focus states</li>
        <li>Enhanced ARIA labels for better screen reader support</li>
        <li>Optimized color contrast for better visibility</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium leading-7 text-emerald-500">v2.1.6: Security Patch <span class="text-base font-normal text-slate-500"> - 2023-08-01</span></h4>
      <p class="text-slate-500">A security patch addressing vulnerabilities reported in the previous version. It's recommended for all users to update to this version to maintain secure operations.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Fixed CSRF vulnerability in forms</li>
        <li>Updated authentication mechanisms</li>
        <li>Improved session management for enhanced security</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium leading-7 text-emerald-500">v2.2.3: New Components <span class="text-base font-normal text-slate-500"> - 2023-10-01</span></h4>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-04.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">Introducing several new components to enhance UI capabilities, including new card designs, tabbed navigation, and progress indicators. These additions allow for more flexibility in building pages.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>New card component with hover effects</li>
        <li>Tabbed navigation for better organization</li>
        <li>Progress indicators for tracking tasks</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Changelog feed with images-->

<!-- Component: Alternative Changelog feed -->
<ul aria-label="Alternative changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 lg:pl-0 before:absolute before:top-0 before:left-6 lg:before:left-[8.5rem] before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 lg:after:left-[8.5rem] after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200">
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-02-08</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h3 class="text-lg font-medium leading-7 text-emerald-500">v1.2.6 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-21</span></h3>
      <p class=" text-slate-500">This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Update several dependencies, including postcss-js.</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-01-21</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v1.2.5 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-21</span> </h4>
      <p class=" text-slate-500">Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Remove outdated focus style fix in Preflight</li>
        <li>Fix error when not using a config file with postcss</li>
        <li>Fix issue with resolveConfig not being importable in Next.js</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-01-18</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h4 class="text-lg font-medium text-emerald-500">v1.2.4 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-18</span></h4>
      <p class=" text-slate-500">Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the group class.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Added utilities for screenreader visibility</li>
        <li>First, last, even, and odd child variants</li>
        <li>Disabled variant</li>
        <li>Visited variant</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Alternative Changelog feed -->

<!-- Component: Alternative Changelog feed -->
<ul aria-label="Alternative changelog feed" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 text-sm lg:pl-0 before:absolute before:top-0 before:left-6 lg:before:left-[8.5rem] before:h-full before:border before:-translate-x-1/2 before:border-slate-200 before:border-dashed after:absolute after:top-6 after:left-6 lg:after:left-[8.5rem] after:bottom-6 after:border after:-translate-x-1/2 after:border-slate-200">
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-02-08</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h3 class="text-base font-medium leading-7 text-emerald-500">v1.2.6 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-21</span></h3>
      <p class=" text-slate-500">This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Update several dependencies, including postcss-js.</p>
    </div>
  </li>
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-01-21</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium text-emerald-500">v1.2.5 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-21</span> </h4>
      <p class=" text-slate-500">Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Remove outdated focus style fix in Preflight</li>
        <li>Fix error when not using a config file with postcss</li>
        <li>Fix issue with resolveConfig not being importable in Next.js</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 lg:pl-0 lg:flex lg:gap-12 before:absolute before:z-10 before:left-0 lg:before:left-[8.5rem] before:top-2 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:w-28 lg:text-right lg:block">2023-01-18</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h4 class="text-base font-medium text-emerald-500">v1.2.4 <span class="font-normal lg:hidden text-slate-500"> - 2023-01-18</span></h4>
      <p class=" text-slate-500">Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the group class.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Added utilities for screenreader visibility</li>
        <li>First, last, even, and odd child variants</li>
        <li>Disabled variant</li>
        <li>Visited variant</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Alternative Changelog feed -->

<!-- Component: Alternative changelog feed with images -->
<ul aria-label="Alternative changelog feed with images" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 before:absolute before:left-6 before:top-0 before:h-full before:-translate-x-1/2 before:border before:border-dashed before:border-slate-200 after:absolute after:bottom-6 after:left-6 after:top-6 after:-translate-x-1/2 after:border after:border-slate-200 lg:pl-0 lg:before:left-[8.5rem] lg:after:left-[8.5rem]">
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-07-15</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h3 class="text-lg font-medium leading-7 text-emerald-500">v2.1.0: UI Overhaul <span class="font-normal text-slate-500 lg:hidden"> - 2023-07-15</span></h3>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-01.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">This release brings a fresh, modern design to our components, improving aesthetics and usability. New animations and interactions make the experience more engaging.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Revamped layout for greater flexibility</li>
        <li>New animations for interactive elements</li>
        <li>Updated color schemes for better contrast</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-06-01</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h3 class="text-lg font-medium leading-7 text-emerald-500">v2.0.2: Minor Updates <span class="font-normal text-slate-500 lg:hidden"> - 2023-06-01</span></h3>
      <p class="text-slate-500">This minor update addresses small UI tweaks and bug fixes to improve the user experience.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Fixed alignment issues on mobile</li>
        <li>Improved font rendering for better readability</li>
        <li>Enhanced button styles for accessibility</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-lg font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-06-25</h4>
    <div class="flex flex-col flex-1 gap-4">
      <h3 class="text-lg font-medium leading-7 text-emerald-500">v2.0.5: Performance Enhancements <span class="font-normal text-slate-500 lg:hidden"> - 2023-06-25</span></h3>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-02.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">We've streamlined our codebase and optimized loading times, ensuring smoother performance across devices. This update also brings several minor bug fixes.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Reduced load time by 25%</li>
        <li>Improved rendering speed for mobile devices</li>
        <li>Fixed minor UI bugs</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Alternative changelog feed with images -->

<!-- Component: Alternative sm changelog feed with images -->
<ul aria-label="Alternative sm changelog feed with images" role="feed" class="relative flex flex-col gap-12 py-12 pl-6 text-sm before:absolute before:left-6 before:top-0 before:h-full before:-translate-x-1/2 before:border before:border-dashed before:border-slate-200 after:absolute after:bottom-6 after:left-6 after:top-6 after:-translate-x-1/2 after:border after:border-slate-200 lg:pl-0 lg:before:left-[8.5rem] lg:after:left-[8.5rem]">
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-07-15</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h3 class="text-base font-medium leading-7 text-emerald-500">v2.1.0: UI Overhaul <span class="font-normal text-slate-500 lg:hidden"> - 2023-07-15</span></h3>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-01.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">This release brings a fresh, modern design to our components, improving aesthetics and usability. New animations and interactions make the experience more engaging.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Revamped layout for greater flexibility</li>
        <li>New animations for interactive elements</li>
        <li>Updated color schemes for better contrast</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-06-01</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h3 class="text-base font-medium leading-7 text-emerald-500">v2.0.2: Minor Updates <span class="font-normal text-slate-500 lg:hidden"> - 2023-06-01</span></h3>
      <p class="text-slate-500">This minor update addresses small UI tweaks and bug fixes to improve the user experience.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Fixed alignment issues on mobile</li>
        <li>Improved font rendering for better readability</li>
        <li>Enhanced button styles for accessibility</li>
      </ul>
    </div>
  </li>
  <li role="article" class="relative pl-6 before:absolute before:left-0 before:top-2 before:z-10 before:h-2 before:w-2 before:-translate-x-1/2 before:rounded-full before:bg-emerald-500 before:ring-2 before:ring-white lg:flex lg:gap-12 lg:pl-0 lg:before:left-[8.5rem]">
    <h4 class="hidden text-base font-medium leading-7 text-slate-500 lg:block lg:w-28 lg:text-right">2023-06-25</h4>
    <div class="flex flex-col flex-1 gap-2">
      <h3 class="text-base font-medium leading-7 text-emerald-500">v2.0.5: Performance Enhancements <span class="font-normal text-slate-500 lg:hidden"> - 2023-06-25</span></h3>
      <div class="overflow-hidden border rounded border-slate-100 bg-slate-50">
        <img src="https://Tailwindmix.b-cdn.net/feeds/changelog_feed-variation-image-02.png" alt="Changelog image" width="1000" height="500" />
      </div>
      <p class="text-slate-500">We've streamlined our codebase and optimized loading times, ensuring smoother performance across devices. This update also brings several minor bug fixes.</p>
      <ul class="pl-5 list-disc text-slate-500 marker:text-emerald-500">
        <li>Reduced load time by 25%</li>
        <li>Improved rendering speed for mobile devices</li>
        <li>Fixed minor UI bugs</li>
      </ul>
    </div>
  </li>
</ul>
<!-- End Alternative sm changelog feed with images -->