<div class="card">
   <div class="card-header">
      <h3 class="card-title">Timeline</h3>
   </div>
   <div class="card-body">
      <ul class="list list-timeline">
         <li>
            <div class="list-timeline-icon bg-twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">10 hrs ago</div>
               <p class="list-timeline-title">+1150 Followers</p>
               <p class="text-muted">You’re getting more and more followers, keep it up!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 hrs ago</div>
               <p class="list-timeline-title">+3 New Products were added!</p>
               <p class="text-muted">Congratulations!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">1 day ago</div>
               <p class="list-timeline-title">Database backup completed!</p>
               <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">1 day ago</div>
               <p class="list-timeline-title">+290 Page Likes</p>
               <p class="text-muted">This is great, keep it up!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 days ago</div>
               <p class="list-timeline-title">+3 Friend Requests</p>
               <div class="avatar-list mt-3">
                  <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)">
                     <span class="badge bg-success"></span>
                  </span>
                  <span class="avatar avatar-sm">
                     <span class="badge bg-success"></span>
                     JL</span>
                  <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)">
                     <span class="badge bg-success"></span>
                  </span>
               </div>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">3 days ago</div>
               <p class="list-timeline-title">+2 New photos</p>
               <div class="mt-3">
                  <div class="row row-sm">
                     <div class="col-6">
                        <div class="media media-2x1 rounded">
                           <a class="media-content" style="background-image: url(./static/photos/6d35d9a2bd6c63c2.jpg
)"></a>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="media media-2x1 rounded">
                           <a class="media-content" style="background-image: url(./static/photos/6f6e2ef709fef97a.jpg
)"></a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 weeks ago</div>
               <p class="list-timeline-title">System updated to v2.02</p>
               <p class="text-muted">Check the complete changelog at the <a href="#">activity
                     page</a>.</p>
            </div>
         </li>
      </ul>
   </div>
</div>

<div class="card">
   <div class="card-header">
      <h3 class="card-title">Timeline</h3>
   </div>
   <div class="card-body">
      <ul class="list list-timeline list-timeline-simple">
         <li>
            <div class="list-timeline-icon bg-twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">10 hrs ago</div>
               <p class="list-timeline-title">+1150 Followers</p>
               <p class="text-muted">You’re getting more and more followers, keep it up!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 hrs ago</div>
               <p class="list-timeline-title">+3 New Products were added!</p>
               <p class="text-muted">Congratulations!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">1 day ago</div>
               <p class="list-timeline-title">Database backup completed!</p>
               <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">1 day ago</div>
               <p class="list-timeline-title">+290 Page Likes</p>
               <p class="text-muted">This is great, keep it up!</p>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 days ago</div>
               <p class="list-timeline-title">+3 Friend Requests</p>
               <div class="avatar-list mt-3">
                  <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)">
                     <span class="badge bg-success"></span>
                  </span>
                  <span class="avatar avatar-sm">
                     <span class="badge bg-success"></span>
                     JL</span>
                  <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)">
                     <span class="badge bg-success"></span>
                  </span>
               </div>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">3 days ago</div>
               <p class="list-timeline-title">+2 New photos</p>
               <div class="mt-3">
                  <div class="row row-sm">
                     <div class="col-6">
                        <div class="media media-2x1 rounded">
                           <a class="media-content" style="background-image: url(./static/photos/6d35d9a2bd6c63c2.jpg
)"></a>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="media media-2x1 rounded">
                           <a class="media-content" style="background-image: url(./static/photos/6f6e2ef709fef97a.jpg
)"></a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </li>
         <li>
            <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            </div>
            <div class="list-timeline-content">
               <div class="list-timeline-time">2 weeks ago</div>
               <p class="list-timeline-title">System updated to v2.02</p>
               <p class="text-muted">Check the complete changelog at the <a href="#">activity
                     page</a>.</p>
            </div>
         </li>
      </ul>
   </div>
</div>