JSFiddle - React, Tailwind, and code Playground

by dcodesmith

HTML

<div class="audio-lg">
    <a href="#openAudio" ref="openAudio">
        <img src="http://s30.postimg.org/9nq5lwwr5/audio_default_thumbnail.jpg" class="poster" alt="Test Title" width="320px" height="180px">
        <span class="play-static"></span>
    </a>
</div>
<div id="openAudio" class="show_player">
    <div class="pp_pic_holder" style="display:block">
        <div class="ppt" style="opacity:1;display:block;width:500px;height:20px"></div>
        <div class="pp_content_container">
            <div class="pp_content" style="min-height:248px;width:500px">
                <div class="pp_fade" style="display:block">
                    <div id="pp_full_res" style="background-color:black;text-align:center">
                        <audio class="player" id="player" preload="auto" controls>
                            <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
                            Your browser does not support the audio element.
                        </audio>
                    </div>
                    <div class="pp_details" style="width:500px">
                        <p class="pp_description" style="display:block">Test Title</p>
		                <a class="pp_close" href="#" ref="closeAudio" style="color:#fff">Close</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="overlay"></div>
</div>

CSS

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    background-color: gray
}
.pp_pic_holder, a.pp_close {
    position: absolute
}
.audio-lg a, .pp_details {
    position: relative
}
.ppt, #pp_full_res .pp_inline {
    color: #fff
}
.play-static {
    text-align: center
}
.pp_close {
    float: right;
    background: #f26542;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    cursor: pointer;
    margin: 6px 8px 0 0;
    padding: 6px 7px 5px
}
.pp_close:hover {
    background: #c3382e;
    color: #fff
}

.pp_fade {
    display: none
}
.pp_close {
    top: -6px;
    right: 0;
    margin: 0
}
.pp_description {
    color: #fff;
    display: none;
    margin: 0 85px 10px 0
}
.pp_pic_holder a:focus {
    outline: medium none
}
.pp_pic_holder {
    display: none;
    width: 100px;
    z-index: 10000
}
.pp_content {
    width: 40px;
    min-width: 200px;
    height: 40px
}
.pp_content_container {
    position: relative;
    width: 100%
}
.pp_details {
    float: left;
    min-width: 200px;
    margin: 10px 0 2px
}
#pp_full_res {
    line-height: 1 !important
}
#pp_full_res .pp_inline p {
    margin: 0 0 15px
}
.ppt {
    display: none;
    font-size: 17px;
    z-index: 9999;
    margin: 0 0 5px 15px
}
.pp_gallery, .pp_content {
    background: rgba(28, 28, 28, .85);
    width: auto;
    border-radius: 16px;
    padding: 20px
}
.pp_overlay.overlay {
    display: none;
    z-index: 9500
}
.audio-lg, .audio-lg a, .audio-lg .poster {
    max-width:330px
}
audio {
    width:500px
}
.audio-lg .poster {
    -moz-box-shadow:2px 0 4px #663700;
    -webkit-box-shadow:2px 0 4px #663700;
    box-shadow:2px 0 4px #663700
}
.play-static {
    position: absolute;
    top: -180px;
    left: 0;
    background: url(http://s22.postimg.org/uanp24gnx/play_button.png) center center no-repeat;
    width: 316px;
    height: 190px;
    z-index: 2
}
.play-static:hover {
    background:...

JavaScript

$('a[ref=openAudio]').click(function(){
    $('#player').get(0).play();
});
$('a[ref=closeAudio]').click(function(){
    $('#player').get(0).pause();
});

$(document).on('keyup', hideModal);
$(".overlay").on('click', hideModal);

function hideModal(e) {
    if (e.keyCode == 27) {
        window.location.hash = "#";
    } else if (e.type === 'click') {
        window.location.hash = "#";
    }
    $('#player').get(0).pause();
}