JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="https://cdn.rawgit.com/gorshkov-leonid/jsfiddle-tests/master/src/webcomponents/webcomponents.js"></script>
<!-- http://habrahabr.ru/post/180377/ -->
<!-- http://w3c.github.io/webcomponents/spec/shadow/#example-tree-of-trees -->
<!-- http://webcomponents.org/ -->
<div id="player">
    <shadow-root id="player-shadow-root">
        <div id="controls">
            <button id="play-button">PLAY</button>
            <input type="range" id="timeline">
                <shadow-root id="timeline-shadow-root">
                    <div id="slider-thumb" id="timeline-slider-thumb"></div>
                </shadow-root>
            </input>
            <div id="volume-slider-container">
                <input type="range" id="volume-slider">
                    <shadow-root id="volume-shadow-root">
                        <div id="slider-thumb" id="volume-slider-thumb"></div>
                    </shadow-root>
                </input>
            </div>
        </div>
    </shadow-root>
</div