JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dropthebit.com/demos/photobox/photobox/jquery.photobox.js"></script>
<div id='gallery'>
    <ul id="gallery">
        <li class="loaded">
    <a href="http://img1.goodfon.ru/wallpaper/middle/9/38/koshka-vzglyad-pryzhok.jpg">
			<img src="http://img1.goodfon.ru/wallpaper/middle/2/7f/leto-cvety-cvetok-pchela-bee.jpg" alt="photo1 title">
		</a>
            </li>
      <li class="loaded">  
	<a href="http://img1.goodfon.ru/wallpaper/middle/0/1c/les-park-derevya-doroga-zabor.jpg">
			<img src="http://img1.goodfon.ru/wallpaper/middle/0/1c/les-park-derevya-doroga-zabor.jpg" alt="photo2 title">
		</a>
          </li>
</div>

CSS

#gallery {
    float:right;
    width:60%;
}
#gallery li {
    list-style:none;
    perspective:100px;
    -webkit-perspective:100px;
    margin:1px;
    float:right;
    position:relative;
    transition:.1s;
    -webkit-transition:0.1s;
}
#gallery li.video::before {
    content:'\25BA';
    color:#FFF;
    font-size:20px;
    height:20px;
    width:20px;
    line-height:0.9;
    position:absolute;
    bottom:3px;
    left:4px;
    z-index:1;
    background:rgba(0, 0, 0, 0.4);
    box-shadow:0 0 0 3px rgba(0, 0, 0, 0.4);
    border-radius:0 3px 0 0;
    pointer-events:none;
    opacity:0;
    transition:.5s 0.2s;
}
#gallery li.loaded.video::before {
    opacity:1;
}
#gallery a {
    display:block;
    width:75px;
    height:68px;
    vertical-align:bottom;
    overflow:hidden;
    background:rgba(0, 0, 0, 0.1);
    transition:.4s ease-out;
    -webkit-transition:0.4s ease-out;
    -webkit-transform:rotateX(90deg) translate(-50px, -50%);
    transform:rotateX(90deg) translate(-50px, -50%);
}
#gallery a:active, #gallery a:focus {
    outline:none;
}
#gallery a img {
    min-height:100%;
    width:100%;
    transition:.3s ease-out;
    -webkit-transition:0.3s ease-out;
}
#gallery .loaded a {
    -webkit-transform:rotateX(0deg) translate(0, 0);
    transform:rotateX(0deg) translate(0, 0);
}
#gallery li.loaded:hover {
    z-index:2;
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
}
#gallery li.loaded a:hover {
    box-shadow:0 0 0 2px #FFF, 0 0 20px 5px #000;
    transition:.1s;
    -webkit-transition:0.1s;
}
#gallery li.loaded:hover img {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
}
#gallery li.loaded.video:hover::before {
    opacity:0;
}
/*------- media queries -----------*/
 @media all and (max-width:700px) {
    body {
        background-position:0 0;
        background-attachment:inherit;
        box-shadow:none;
    }
    .main, #gallery {
        float:none;
        width:auto;
        font-size:0.9em;
    }
    .main h1 {
       ...

JavaScript

$(document).ready(function() {
$('#gallery').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#gallery').photobox('a:first', {
    thumbs: false,
    time: 0
}, imageLoaded);

});