JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container" id="participants"></div>

CSS

body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            width: 80vw;
            height: 80vh;
            justify-content: center;
            align-items: center;
        }
        .participant {
            flex: 1 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ddd;
            border: 4px solid #ddd;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            transition: 0.3s;
            min-width: 40%;
        }
        .active {
            border: 4px solid #4caf50;
            background-color: #c8e6c9;
        }

JavaScript

const participantsContainer = document.getElementById("participants");
        const participants = ["Alice","Charlie", "Diana","Dan", "Diana","Dan", "Diana"];

        function addParticipants() {
            participants.forEach(name => {
                const div = document.createElement("div");
                div.classList.add("participant");
                div.textContent = name;
                participantsContainer.appendChild(div);
            });
        }

        function highlightSpeaker() {
            const allParticipants = document.querySelectorAll(".participant");
            allParticipants.forEach(p => p.classList.remove("active"));
            const randomIndex = Math.floor(Math.random() * allParticipants.length);
            allParticipants[randomIndex].classList.add("active");
        }

        addParticipants();
        setInterval(highlightSpeaker, 2000);