JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://s-sd.ru/files/CSS3Lightbox/css/demo.css">
<ul class="lb-album">
					<li>
						<a href="javascript">
                            <img src="http://s-sd.ru/files/CSS3Lightbox/images/thumbs/1.jpg" alt="image01" />
							<span>Заголовок 1</span>
						</a>
						<div class="lb-overlay" id="image-1">
							<img src="http://s-sd.ru/files/CSS3Lightbox/images/full/1.jpg" alt="image01" />
							<div>
								<h3>apo-ucoz<span>/бла бла бла/</h3>
								<p>Описание к картинке</p>
								<a href="#image-10" class="lb-prev">Prev</a>
								<a href="#image-2" class="lb-next">Next</a>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
					</li>
					<li>
						<a href="#image-2">
                            <img src="http://s-sd.ru/files/CSS3Lightbox/images/thumbs/2.jpg" alt="image02" />
							<span>Port de bras</span>
						</a>
						<div class="lb-overlay" id="image-2">
							<img src="http://s-sd.ru/files/CSS3Lightbox/images/full/2.jpg" alt="image02" />
							<div>							
								<h3>port de bras <span>/ˌpôr də ˈbrä/</h3>
								<p>An exercise designed to develop graceful movement and disposition of the arms</p>
								<a href="#image-1" class="lb-prev">Prev</a>
								<a href="#image-3" class="lb-next">Next</a>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
					</li>
					<li>
						<a href="#image-3">
                            <img src="http://s-sd.ru/files/CSS3Lightbox/images/thumbs/3.jpg" alt="image03" />
							<span>Plié</span>
						</a>
						<div class="lb-overlay" id="image-3">
							<img src="http://s-sd.ru/files/CSS3Lightbox/images/full/3.jpg" alt="image03" />
							<div>							
								<h3>pli·é <span>/plēˈā/</h3>
								<p>A movement in which a dancer bends the knees and straightens them again</p>
								<a href="#image-2" class="lb-prev">Prev</a>
								<a href="#image-4" class="lb-next">Next</a>
							</div>
							<a href="#page"...

CSS

.lb-album {
    width: 900px;
    margin: 0 auto;
    font-family:'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li {
    float: left;
    margin: 5px;
    position: relative;
    list-style:none;
}
.lb-album li > a, .lb-album li > a img {
    display: block;
}
.lb-album li > a {
    width: 150px;
    height: 150px;
    position: relative;
    padding: 10px;
    background: #f1d2c2;
    -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;
    -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;
    box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 10px;
    left: 10px;
    text-align: center;
    line-height: 150px;
    color: rgba(27, 54, 81, 0.8);
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
    font-size: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
    /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
    /*IE8*/
    background: rgb(241, 210, 194);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.56)), color-stop(100%, rgba(241, 210, 194, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);
    background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);
   ...