<!-- Online -->
   <div class="avatar-status">
      <img src="/Images/person.jpg" alt="person" />
      <span class="status status-online"></span>
   </div>
<!-- DND -->
    <div class="avatar-status">
       <img src="/Images/person1.jpg" alt="person" />
       <span class="status status-dnd"></span>
    </div>
<!-- Offline -->
     <div class="avatar-status">
        <img src="/Images/person2.jpg" alt="person" />
        <span class="status status-offline"></span>
     </div>
</div>