JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<div>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="tabit-nav-link nav-link active" href="#tab-company" data-toggle="tab">Компания</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab-departments" data-toggle="tab">Отделы</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab-humancapital" data-toggle="tab">Человеческий капитал</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-company">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframe" src="~/img/123.gif" />

                <script>
                    new Freezeframe();
                </script>
            </div>
        </div>
        <div class="tab-pane" id="tab-departments">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="~/img/222.gif" />

                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
        <div class="tab-pane" id="tab-humancapital">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay2" src="~/img/333.gif" />

                <script>
                    new Freezeframe('.freezeframeWithOverlay2', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
    </div>
</div>