JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div id="dvd_supplement">
            <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
            <div id="layer-top">
                <a id="player" href="barsandtone.flv">The player link here</a>
            </div>
            <div id="layer-middle">
                <img id="player_laptop_screen" src="http://placehold.it/300x200" width="300px" height="200px"/>                
            </div>
            <div id="layer-bottom">
                <img id="player_img" src="http://placehold.it/300x200" width="300px" height="200px"/>
            </div>              
        </div>

CSS

img {
    display: block;
}

#dvd_supplement,
#player,
#layer-top,
#layer-middle,
#layer-bottom {
    width: 300px;
    height: 200px;
    position: relative;
}

#layer-top {
    z-index: 3
}

#layer-middle {
    z-index: 2;
}

#layer-bottom {
    z-index: 1;
}

#player {
    display: block;
    background-color: red;
}

#layer-middle {
    top: -200px;
}

#layer-bottom {
    top: -400px;
}