<div class="card">
    <div class="card-header pb-0">
     <h3>Variation Timeline </h3>
      <p class="f-m-light mt-1">
      Use the <code>.activity-dot-primary </code>through rounded animations.</p>
  </div>
  <div class="card-body dark-timeline">
    <ul>
      <li class="d-flex">
        <div class="activity-dot-primary"></div>
        <div class="w-100 ms-3">
          <p class="d-flex justify-content-between mb-2"><span class="date-content light-background">8th March, 2023
            </span><span>1 day ago</span></p>
          <h3>Updated Product<span class="dot-notification"></span></h3>
          <p class="f-light">Quisque a consequat ante sit amet magna...</p>
        </div>
      </li>
      <li class="d-flex">
        <div class="activity-dot-warning"></div>
        <div class="w-100 ms-3">
          <p class="d-flex justify-content-between mb-2"><span class="date-content light-background">5th Feb, 2023
            </span><span>Today</span></p>
          <h3>Added Bew Items<span class="dot-notification"></span></h3><span class="f-light">Quisque a consequat ante
            sit amet magna...</span>
          <div class="recent-images">
            <ul>
              <li>
                <div class="recent-img-wrap"><img src="assets/images/dashboard-2/product/1.png" alt="chair"></div>
              </li>
              <li>
                <div class="recent-img-wrap"><img src="assets/images/dashboard-2/product/2.png" alt="chair"></div>
              </li>
              <li>
                <div class="recent-img-wrap"><img src="assets/images/dashboard-2/product/3.png" alt="men t-shirt">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="d-flex pb-0">
        <div class="activity-dot-secondary"></div>
        <div class="w-100 ms-3">
          <p class="d-flex justify-content-between mb-2"><span class="date-content light-background">20th Sep, 2023
            </span><span>12:00 PM</span></p>
          <h3>Tello just like your product<span class="dot-notification"></span></h3>
          <p>Quisque a consequat ante sit amet magna...</p>
        </div>
      </li>
    </ul>
  </div>
</div>