JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!-- Переключатель между Friends и Hall -->
<div class="switch">
    <button id="friendsButton" class="switch__btn">Friends</button>
    <button id="hallButton" class="switch__btn">Hall</button>
</div>

<!-- Контейнер Friends -->
<div id="friendsContainer" class="friends" style="display: none;">
    <div class="friends__body container">
        <div class="friends__title">Friends</div>
        <div class="friends__invited">
            <div class="friends__invited-coins">
                <picture>
                    <source srcset="{{ url_for('static', filename='img/coin.webp') }}" type="image/webp">
                    <img src="img/coin.png" alt="">
                </picture>
                <span id="friends_userbalance" class="marg-t7"></span>
            </div>
            <button id="friends_claimButton" class="friends__invited-btn" style="display: none;">Claim</button>
        </div>
        <p class="friends__message">Score 10% from each referral</p>
        <div class="friends__list">
            <div class="friends__list-title">
                <h4>Friends List</h4>
                <div class="best-result">
                    <picture>
                        <source srcset="static/img/score.svg" type="image/svg+xml">
                        <img src="static/img/score.svg" alt="">
                    </picture>
                    <p id="freinds_userBestResult"></p>
                </div>
            </div>
            <div class="friends__list-items" id="friendsListItems">
                <!-- Friends list items will be dynamically inserted here -->
                <div class="friends__list-item">
                    <div class="friends__list-icon" style="background-color: rgb(106, 134, 255);">
                        <img src="static/img/ghost200x200.png" alt="">
                    </div>
                    <p class="friends__list-name"></p>
                    <div class="friends__list-score">
                        <picture>
                   ...