import {
    users
} from "../models/main.js"


const myRanking = document.querySelector("#usersRank")

renderRankings();

function renderRankings(){

    let result3 = ""


    for(const user of users) {
        result3 += `
    <div>


    <style>
table, th, td {
  border: 1px solid green;
  border-collapse: collapse;
}
</style>

    <table style="width:50%">
  <tr>
    <th>Nome</th>
    <th>XP</th>
  </tr>
  <tr>
    <td>${user.username}</td>
    <td>${user.xp}</td>
  </tr>
</table>

    </div>
    `


        myRanking.innerHTML = result3;



    }
}

<div class="container">

  <div id="ranking" class="jumbotron jumbotron-fluid rounded">
    <div class="container">
        <h3 class="display-4">Rankings</h3>



        <table id="usersRank">


        </table>

    </div>
</div>