<div class="overflow-x-auto">
  <table class="table table-leaderboard">
    <tr>
      <th class="leaderboard-status">
        Δ
      </th>
      <th class="leaderboard-position">
        #
      </th>
      <th class="leaderboard-team-name">
        Team Name
      </th>
      <th class="leaderboard-participants">
        Participants
      </th>
      <th class="leaderboard-score">
        F1_Score
      </th>
      <th class="leaderboard-log-loss">
        Log Loss
      </th>
      <th class="leaderboard-entries">
        Entries
      </th>
      <th class="leaderboard-trend">
        Submission Trend
      </th>
      <th class="leaderboard-actions"></th>
    </tr>

    <tr>
      <td class="leaderboard-status">
        <span class="status-no-change"></span>  
      </td>
      <td class="leaderboard-position">
        1
      </td>
      <td class="leaderboard-team-name">
        <a class="leaderboard-link" href="/">
          team_name
        </a>   
      </td>
      <td class="leaderboard-participants">
        <div class="avatar-group">
          <a class="avatar-group-item user-rating-2" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-1" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-4" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-3" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-2.jpg" alt="User avatar">
          </a> 
        </div>  
      </td>
      <td class="leaderboard-score">
        0.752
      </td>
      <td class="leaderboard-log-loss">
        0.647
      </td>
      <td class="leaderboard-entries">
        202
      </td>
      <td class="leaderboard-trend">
        <div id="chart-1184.7503682653708" style="height: 50px; width: 200px; text-align: center; color: #999; line-height: 50px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas width="400" height="100" class="chartjs-render-monitor" style="display: block; height: 50px; width: 200px;"></canvas></div>
      </td>
      <td class="leaderboard-actions">
        <a class="btn-secondary" href="/" role="button">
          View
        </a> 
        <a class="btn-secondary" href="/" role="button">
          Code&nbsp;
          <i class="las la-external-link-alt"></i>
        </a>  
      </td>
    </tr>

    <tr>
      <td class="leaderboard-status">
        <span class="status-up"></span>  
      </td>
      <td class="leaderboard-position">
        2
      </td>
      <td class="leaderboard-team-name">
        <a class="leaderboard-link" href="/">
          another_team_name
        </a>   
      </td>
      <td class="leaderboard-participants">
        <div class="avatar-group">
          <a class="avatar-group-item user-rating-4" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-5" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
          </a> 
        </div>  
      </td>
      <td class="leaderboard-score">
        0.752
      </td>
      <td class="leaderboard-log-loss">
        0.647
      </td>
      <td class="leaderboard-entries">
        202
      </td>
      <td class="leaderboard-trend">
        <div id="chart-1184.7503682653708" style="height: 50px; width: 200px; text-align: center; color: #999; line-height: 50px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas width="400" height="100" class="chartjs-render-monitor" style="display: block; height: 50px; width: 200px;"></canvas></div>
      </td>
      <td class="leaderboard-actions">
        <a class="btn-secondary" href="/" role="button">
          View
        </a> 
        <a class="btn-secondary" href="/" role="button">
          Code&nbsp;
          <i class="las la-external-link-alt"></i>
        </a>  
      </td>
    </tr>

    <tr>
      <td class="leaderboard-status">
        <span class="status-down"></span>  
      </td>
      <td class="leaderboard-position">
        3
      </td>
      <td class="leaderboard-team-name">
        <a class="leaderboard-link" href="/">
          team_name
        </a>   
      </td>
      <td class="leaderboard-participants">
        <div class="avatar-group">
          <a class="avatar-group-item user-rating-4" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-2.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-3" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-4" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-5" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-2.jpg" alt="User avatar">
          </a> 
          <a class="avatar-group-item user-rating-3" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
          </a> 
        </div>  
      </td>
      <td class="leaderboard-score">
        0.752
      </td>
      <td class="leaderboard-log-loss">
        0.647
      </td>
      <td class="leaderboard-entries">
        202
      </td>
      <td class="leaderboard-trend">
        <div id="chart-1184.7503682653708" style="height: 50px; width: 200px; text-align: center; color: #999; line-height: 50px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas width="400" height="100" class="chartjs-render-monitor" style="display: block; height: 50px; width: 200px;"></canvas></div>
      </td>
      <td class="leaderboard-actions">
        <a class="btn-secondary" href="/" role="button">
          View
        </a> 
        <a class="btn-secondary" href="/" role="button">
          Code&nbsp;
          <i class="las la-external-link-alt"></i>
        </a>  
      </td>
    </tr>

    <tr>
      <td class="leaderboard-status">
        <span class="status-no-change"></span>  
      </td>
      <td class="leaderboard-position">
        4
      </td>
      <td class="leaderboard-team-name">
        <a class="leaderboard-link" href="/">
          team_name
        </a>   
      </td>
      <td class="leaderboard-participants">
        <div class="avatar-group">
          <a class="avatar-group-item user-rating-3" href="/">
            <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
          </a> 
        </div>  
      </td>
      <td class="leaderboard-score">
        0.752
      </td>
      <td class="leaderboard-log-loss">
        0.647
      </td>
      <td class="leaderboard-entries">
        202
      </td>
      <td class="leaderboard-trend">
        <div id="chart-1184.7503682653708" style="height: 50px; width: 200px; text-align: center; color: #999; line-height: 50px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas width="400" height="100" class="chartjs-render-monitor" style="display: block; height: 50px; width: 200px;"></canvas></div>
      </td>
      <td class="leaderboard-actions">
        <a class="btn-secondary" href="/" role="button">
          View
        </a> 
        <a class="btn-secondary" href="/" role="button">
          Code&nbsp;
          <i class="las la-external-link-alt"></i>
        </a>  
      </td>
    </tr>

  </table>
</div>