JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://visbot.net/wp-content/themes/vb2013/assets/js/jquery.fancybox-combo.min.js"></script>
<link rel="stylesheet" href="http://visbot.net/wp-content/themes/vb2013/assets/css/jquery.fancybox.css">
<div class="tile">
    <p class="artist">Click to toggle</p>
    <ul class="details" style="display:none">
        <li> <a class="download" href="#">Download</a></li>
        <li><a class="fancybox-media" href="//www.youtube.com/watch?v=Y16uKeTuBWQ">Video</a></li>
    </ul>
</div>

CSS

.tile {
    background-color:indigo;
    color:#fff;
    width:120px;
    height:120px;
    text-align:center
}
a {
    color:#fff
}
.large {
    width:240px;
    height:240px
}
.details {
    color:#ccc
}
ul {list-style: none;padding:0;font-size:150%}

JavaScript

$('.fancybox-media').fancybox({
    autoSize: true,
    helpers: {
        media: {}
    }
});

// resize tile on click
$('.tile').on('click', function ( e ) {
       console.log(e.target);
    
    /*if( !$( e.target ).hasClass( 'tile' ) ) {
        return true;
    }
    var $this = $(this);
    $this.toggleClass('large');
    $this.children('.details').toggle();*/
});