JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div class="col-12 sg-player-col">
<div class="row sg-player-title">
<div class="col-12 sg-load-message sg-hidden"><i class="fas fa-cog fa-spin"></i>&nbsp;<span class="sg-version">SGplayer 3.1.0</span></div>
<div class="col-12 sg-stream-selector" title="Select Content">
<button type="button" class="btn btn-lg btn-block sg-content-select" data-toggle="modal" data-target="#contentMenu"><span class="sg-stream-title">Radio Essentials</span><i class="sg-stream-select-icon fas fa-bars"></i></button>
     </div>
<p></p></div>
<div class="row sg-row-spacer sg-transport-row sg-can-fade">
<div class="col-12 px-4">
<div class="sg-transport-controls">
<div class="sg-progress-holder sg-slider-id-1648642224387 sg-slider-container sg-slider-id-1648647645317" data-value="0" data-min="0" data-max="Infinity" data-vertical="false" data-text="00:00:00">
<div class="progress sg-buffering sg-hidden">
<div class="progress-bar progress-bar-striped progress-bar-animated sg-buffering-bar"></div>
<p></p></div>
<div class="sg-load-progress" style="width: 0%;"></div>
<div class="sg-play-progress sg-slider" data-value="0" data-min="0" data-max="Infinity" data-vertical="false" data-text="00:00:00" style="width: 100%;">
<div class="sg-slider-grabber sg-hidden" title="00:00:00">
<div class="sg-slider-thumb"></div>
<p></p></div>
<p></p></div>
<p></p></div>
<div class="sg-content-current-time float-left sg-text-accent">00:00:00</div>
<div class="sg-content-duration float-right sg-text-accent">LIVE</div>
<p></p></div>
<p></p></div>
<p></p></div>
<div class="row justify-content-center sg-controls-row sg-can-fade">
<div class="col no-gutters sg-control sg-control-play"><a href="#" class="btn" title="Play" role="link"><i class="fas fa-lg fa-play"></i></a></div>
<div class="col no-gutters sg-control sg-control-volume">
         <a href="#" class="btn" title="Mute" role="link"><i class="fas fa-lg fa-volume-up"></i></a><p></p>
<div class="sg-volume-holder">
<div class="sg-volume-label"><span...

JavaScript

! function(a, b) {
    "use strict";

    function c(a, b) {
        w([function(b) {
            v({
                url: a.config,
                type: "json"
            }, function(a, c) {
                return J = d(c), b(a, c)
            })
        }, function(b, c) {
            e(a.scripts.googleAnalytics, b, function(a) {
                return c(null, b)
            })
        }, function(a, b) {
            f(a, function(c) {
                return b(null, a)
            })
        }, function(b, c) {
            g(a, b, function(d) {
                var e = a.query;
                o(e), p({
                    css: a.embedCSS,
                    width: e.w || e.width || null,
                    height: e.h || e.height || null
                });
                var f = null;
                return e.osrc && e.otype && (f = {
                    src: e.osrc,
                    type: e.otype
                }), c(null, b, e, f)
            })
        }, function(a, b, c, d) {
            SGPlayer({
                target: ".sg-content",
                hostUrl: C,
                baseUrl: E,
                query: b || [],
                activeStreamIndex: b && b.s ? b.s : 0,
                sourceOverride: c,
                ip: b.ip ? b.ip : null,
                config: a
            }, function(a) {
                return d(null, a)
            })
        }], function(a, c) {
            return a ? (console.error("Error embedding SGplayer: ", a), b(a, !1)) : c ? b(null, c) : b(new Error("Could not load SGplayer"), !1)
        })
    }

    function d(a) {
        var b = {
            googleAnalytics: !1,
            social: !1,
            nielsen: !1,
            googleIMA: !1,
            targetspot: !1,
            adswizz: !1,
            sgmd: !1,
            skins: !1,
            hls: !1
        };
        if (b.googleAnalytics = void 0 !== a.analytics && void 0 !== a.analytics.enabled && 1 == a.analytics.enabled && void 0 !==...