JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<script  type="module" src="./index.js"></script>
</body>
</html>

CSS

.sidenav {
            height: 100px;
            width: 100px;
            position: fixed;
            background-color: #111;
            overflow-x: hidden;
            padding-top: 20px;
        }
        .avatar {
            width: 90px;
            height: 90px;
            border-radius: 10%;
        }

JavaScript

window.addEventListener('load', () => {
    getUsers();
});


function getUsers() {
    const users = ["player1", "player2", "player3", "player4", "player5"];
    const nav = document.createElement("player-nav");
    nav.setAttribute("class", "sidenav")
    document.body.appendChild(nav);

    users.forEach(user => {
        user = document.createElement('table-user');
        nav.appendChild(user);

        user.addEventListener("click", () => {
            alert("lol")
        })
    })
}

class User extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.user();
    }

    user() {
        this.shadow.innerHTML = ` 
        <style>
        .sidenav {
            height: 100px;
            width: 100px;
            position: fixed;
            color-background: #ffff;
            overflow-x: hidden;
            padding-top: 20px;
        }
        .avatar {
            width: 90px;
            height: 90px;
            border-radius: 10%;
        }
        </style>
        <img src="html/avatar.png" alt="Avatar" class="avatar">`
    }
}

customElements.define("table-user", User);