JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
				<div class="am-container" id="am-container">
					<a class="group1" href="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg" title="Это описание">
						<img src="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg"></img>
					</a>
					<a class="group1" href="http://dreempics.com/img/picture/Apr/30/2ccb0866ec80893c60e562c3f68eabd5/1.jpg" title="Это описание">
						<img src="http://dreempics.com/img/picture/Apr/30/2ccb0866ec80893c60e562c3f68eabd5/1.jpg"></img>
					</a>
					<a class="group1" href="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg" title="Это описание">
						<img src="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg"></img>
					</a>
					<a class="group1" href="http://dreempics.com/img/picture/Apr/30/2ccb0866ec80893c60e562c3f68eabd5/1.jpg" title="Это описание">
						<img src="http://dreempics.com/img/picture/Apr/30/2ccb0866ec80893c60e562c3f68eabd5/1.jpg"></img>
					</a>
					<a class="group1" href="http://k-cbs.muzkult.ru/img/upload/3311/image_image_1255853.jpg" title="Это описание">
						<img src="http://k-cbs.muzkult.ru/img/upload/3311/image_image_1255853.jpg"></img>
					</a>
					<a class="group1" href="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg" title="Это описание">
						<img src="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg"></img>
					</a>
					<a class="group1" href="http://www.setwalls.ru/pic/201305/640x960/setwalls.ru-45548.jpg" title="Это описание">
						<img src="http://www.setwalls.ru/pic/201305/640x960/setwalls.ru-45548.jpg"></img>
					</a>
					<a class="group1" href="http://k-cbs.muzkult.ru/img/upload/3311/image_image_1255853.jpg" title="Это описание">
						<img src="http://k-cbs.muzkult.ru/img/upload/3311/image_image_1255853.jpg"></img>
					</a>
					<a class="group1" href="http://www.setwalls.ru/pic/201305/640x960/setwalls.ru-45548.jpg" title="Это описание">
						<img...

CSS

aside {
		width: 380px;
		margin-left: 50px;
		float: right;
		margin-bottom: 50px;
	} 
  .am-container {
	width: 100%;
}
	.am-wrapper{
		float:left;
		position:relative;
		overflow:hidden;
	}
		.am-wrapper img{
			position:absolute;
			outline:none;
		}
    
    /* colot box */
    
    /*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
/*#cboxOverlay{background:url(../images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}*/
#cboxOverlay{background: #000; opacity: 0.5; filter: alpha(opacity = 50);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat...

JavaScript

/* Мозайка галлерея */
	/* * just for this demo:*/
	$('#showcode').toggle(
		function() {
			$(this).addClass('up').removeClass('down').next().slideDown();
		},
		function() {
			$(this).addClass('down').removeClass('up').next().slideUp();
		}
	);
	$('#panel').toggle(
		function() {
			$(this).addClass('show').removeClass('hide');
			$('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 );
		},
		function() {
			$(this).addClass('hide').removeClass('show');
			$('#overlay').stop().animate( { left : '0px' }, 300 );
		}
	);
		
	var $container 	= $('#am-container'),
		$imgs		= $container.find('img').hide(),
		totalImgs	= $imgs.length,
		cnt			= 0;
	
	$imgs.each(function(i) {
		var $img	= $(this);
		$('<img/>').load(function() {
			++cnt;
			if( cnt === totalImgs ) {
				$imgs.show();
				$container.montage({
					liquid 	: false,
					fixedHeight : 190
				});
				
				/* 
				 * just for this demo:
				 */
				$('#overlay').fadeIn(500);
				var imgarr	= new Array();
				for( var i = 1; i <= 73; ++i ) {
					imgarr.push( i );
				}
				$('#loadmore').show().bind('click', function() {
					var len = imgarr.length;
					for( var i = 0, newimgs = ''; i < 15; ++i ) {
						var pos = Math.floor( Math.random() * len ),
							src	= imgarr[pos];
						newimgs	+= '<a href=""><img src="images/' + src + '.jpg"/></a>';
					}
					
					var $newimages = $( newimgs );
					$newimages.imagesLoaded( function(){
						$container.append( $newimages ).montage( 'add', $newimages );
					});
				});
			}
		}).attr('src',$img.attr('src'));
	});	
	/* /Мозайка галлерея */
  
  	/* галлерея */
	$(".group1").colorbox({
		current: "{current}/{total}",
		rel:'group2',
		transition:"elastic",
		speed: 200,
	});
	//Example of preserving a JavaScript event for inline calls.
	$("#click").click(function(){ 
		$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
		return...