JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>

<div class="thumb">
    <a href="http://vimeo.com/32082082" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/26155507" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/33091687" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/33110953" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/32487239" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/30969373" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/31956969" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/30868454" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/31939621" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/25568485" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>



<div class="thumb">
    <a href="http://vimeo.com/30300114" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/30830412" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/30581015" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>


<div class="thumb">
    <a href="http://vimeo.com/28628704" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/29676065" title="Vimeo Lightbox Gallery"><span>Play</span></a>
</div>

<div class="thumb">
    <a href="http://vimeo.com/28725752" title="Vimeo...

CSS

* {margin:0; padding:0}

body {
    background:#d7d7d7; 
    margin:0 auto; 
    text-align:center; 
    width:auto;
}


.thumb {
    display:inline-block; 
    position:relative; 
    margin:15px; 
    padding:20px; 
    background:#fafafa; 
    box-shadow:0 0 3px rgba(0, 0, 0, 0.2); 
    -moz-border-radius:4px; 
    border-radius:4px; 
    color:rgba(0,0,0, 0.8); 
    text-shadow:0 1px 0 #fff;
}

.thumb::before, 
.thumb::after {
    position:absolute; 
    content:""; 
    top:10px; 
    bottom:15px; 
    left:10px; 
    width:50%; 
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); 
    -webkit-transform: rotate(-3deg); 
    -moz-transform:rotate(-3deg); 
    -o-transform:rotate(-3deg); 
    -ms-transform:rotate(-3deg); 
    transform:rotate(-3deg); 
    z-index:-1;
}

.thumb::after {
    right:10px; 
    left:auto; 
    -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
    -o-transform:rotate(3deg); 
    -ms-transform:rotate(3deg); 
    transform:rotate(3deg);
}

.thumb a {
    text-decoration:none;
}

.thumb img {
    border:0; 
    height:120px; 
    margin-bottom:10px; 
    vertical-align:bottom; 
    width:180px;
}

.thumb p {
    color:#505667; 
    font-size:14px;
    font-family: 'Shadows Into Light', cursive;
}

.thumb span {
    background: url(img/img-play.png) no-repeat center center; 
    display:block; 
    height:64px; 
    left:50%; 
    margin:-32px 0 0 -42px; 
    position:absolute; 
    text-indent:-9000px; 
    top:50%; 
    width:84px;
}

#overlay {
    background:#000; 
    opacity: 0.7 ;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70) ;
    height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    z-index:100;
}

#lightbox > a {
    display:block; 
    color:#fff;
    font-size:20px;
    font-weight:bold;
    height:30px; 
    outline:none; 
    position:absolute; 
    font-family: arial, Helvetica,sans-serif;
    text-decoration: none ;
    top:-15px; 
    right:-7px;...

JavaScript

$.fn.center = function(relation) {
    var center_in = (relation) ? $(relation) : $(window);

    this.css("position", "absolute");
    this.css("top", (center_in.height() - this.height()) / 2 + center_in.scrollTop() + "px");
    this.css("left", (center_in.width() - this.width()) / 2 + center_in.scrollLeft() + "px");
    this.css("z-index", "200");
    return this;
};

function vimeoid(url) {
    var vid = url.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/);
    vid = vid[1];
    return vid;
};

(function() {
    $(".thumb a").addClass("lightbox");//rel属性が無い場合はclassを加えて以下の属性フィルタをclassにする
    $("a[class='lightbox']").each(function() {
        var that = this,
            url = $(this).attr('href'),
            id = vimeoid(url),
            thumb = $('<img />');

        $.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {
            format: "json"
        }, function(data) {
            thumb.attr({
                "src": data[0].thumbnail_large,
                "alt": data[0].title,
                "title": data[0].title
            });
            $(that).append(thumb);
            $(that).append('<p>' + data[0].title + '</p>')
        });
    });

    var $overlay = $('<div id="overlay"></div>');
    var $lightbox = $('<div id="lightbox"><a href="#">x</a><div id="lightbox-inner"></div></div>');
    $("a[class='lightbox']").click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href'),
            id = vimeoid(href);
        $overlay.appendTo('body');
        $lightbox.find('#lightbox-inner').html('<iframe src="http://player.vimeo.com/video/' + id + '?title=0&byline=0&portrait=0" width="650" height="366" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
        $lightbox.appendTo('body').center();
    });

    $('#lightbox a').live('click', function(e) {
        e.preventDefault();
        $('#overlay').remove();
        $('#lightbox').remove();
    });
}());