JSFiddle - React, Tailwind, and code Playground

by Taras Vasylivskyy

HTML

{% macro one_article_paid(course, currentUser) %}
<div class="player" data-id="{{ course.id }}">
    <div class="player-box">
        {% if course.lessons %}
        <div class="player-left">
            <ul id="lessons-list" class="lessons-list">
                {% for lesson in course.lessons %}
                <li class="lessons-item" data-index="{{ loop.index -1 }}" itemscope itemtype="https://schema.org/VideoObject">
                    <div class="lessons-head">
                        <span class="lessons-title" itemprop="name">Урок {{ lesson.number }}.</span>
                        <span class="lessons-duration">{{ lesson.duration }}</span>
                    </div>
                    <div class="lessons-name">{{ lesson.title }}</div>
                    <meta itemprop="description" content="{{ lesson.title }}" />
                    <link itemprop="thumbnail" href="{{ course.poster_uri }}" />
                    <link itemprop="thumbnailUrl" href="{{ course.poster_uri }}" />
                    <link href="{{ lesson.url }}" itemprop="url" />
                    <link href="{{ lesson.url }}" itemprop="contentUrl" />
                    <meta itemprop="isFamilyFriendly" content="true" />
                    <meta itemprop="duration" content="{{ lesson.duration }}" />
                    <meta itemprop="uploadDate" content="{{ lesson.uploaded }}" />
                    <progress class="lessons-list__progress" max="100" value="0"></progress>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        <div class="player-right player-right-black">
            <div id="myElement"></div>
            <progress class="video__progress" max="100" value="0"></progress>
        </div>
    </div>
    {% if course.lessons %}
    <div class="pt-20">
        <button class="btn mt-20" id="lessons-toggle">Плеер на 100%</button>
    </div>
    {% endif %}
</div>

{% if course.lessons %}
<script...