<div class="dropdown-notifications">
  <h3 class="dropdown-title">
    Notifications
  </h3>   

  <div class="dropdown-notifications-content">
    <div class="notification-item-user">
      <a class="notification-item-overlay" href="/"></a>
      <div class="notification-item-content">
        <div class="notification-item-image user-rating-1">
          <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
        </div> 
        <div class="notification-item-text">
          <span class="notification-item-description">
            <strong>username</strong> followed you
          </span>

          <span class="notification-item-time">
            2 hours ago 
          </span>
        </div> 
      </div>
    </div>

    <div class="notification-item-challenge">
      <a class="notification-item-overlay" href="/"></a>
      <div class="notification-item-content">
        <div class="notification-item-image">
          <img class="avatar" src="./../../assets/images/placeholder-challenge-1.png" alt="User avatar">
        </div> 
        <div class="notification-item-text">
          <span class="notification-item-description">
            You have moved from X to X place in the <strong>Challenge_title</strong> leaderboard
          </span>

          <span class="notification-item-time">
            Yesterday
          </span>
        </div> 
      </div>
    </div>

    <div class="notification-item-user">
      <a class="notification-item-overlay" href="/"></a>
      <div class="notification-item-content">
        <div class="notification-item-image user-rating-4">
          <img class="avatar" src="./../../assets/images/placeholder-user-avatar-2.jpg" alt="User avatar">
        </div> 
        <div class="notification-item-text">
          <span class="notification-item-description">
            <strong>username</strong> followed you
          </span>

          <span class="notification-item-time">
            1 week ago
          </span>
        </div> 
      </div>
    </div>

    <div class="notification-item-challenge">
      <a class="notification-item-overlay" href="/"></a>
      <div class="notification-item-content">
        <div class="notification-item-image">
          <img class="avatar" src="./../../assets/images/placeholder-challenge-2.png" alt="User avatar">
        </div> 
        <div class="notification-item-text">
          <span class="notification-item-description">
            You have moved from X to X place in the <strong>Challenge_title</strong> leaderboard
          </span>

          <span class="notification-item-time">
            2 weeks ago
          </span>
        </div> 
      </div>
    </div>
  </div>

  <hr class="dropdown-divider">

  <div class="dropdown-link">
    <a href="/" class="dropdown-link-content">
      <span>View all</span>
      <i class="las la-arrow-right"></i>
    </a>
  </div>
</div>