JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<aside>
	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_dawn-30x45.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_dawn-30x45.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь Борисоглебский монастырь Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_borisoglebsky-51x65.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_borisoglebsky-51x65.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_borisoglebsky-51x65.jpg"></a>
	<span>100500x80</span>
	
	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_dawn-30x45.jpg"></a>
	<span>100500x80</span>
	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_dawn-30x45.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_dawn-30x45.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь Борисоглебский монастырь Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_borisoglebsky-51x65.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img src="http://superartnow.com/wp-content/gallery/rostov-veliky/thumbs/thumbs_borisoglebsky-51x65.jpg"></a>
	<span>100500x80</span>

	<h4>Борисоглебский монастырь</h4>
	<a href="#"><img...

CSS

* {margin:0; padding:0;}
body {background:#fff;}
aside {background:#fff; font-size:0; word-spacing:-14px; vertical-align:top; margin:50px; max-width:600px; padding:1px 1px 0 0;}
aside h4, aside a, aside span {background:#fff; font-size:14px; word-spacing:0; display:inline-block; width:198px; 
text-align:center; position:relative; border-color:#ccc; border-style:solid;}

aside  h4  {margin:0 -1px 0 0; vertical-align:top; left:1px; padding:5px 0 50px 0; border-width:1px 1px 0;}
aside a  {margin:70px 0 40px -200px; left:2px; vertical-align:top; z-index:2; border-width:0 1px;}
aside span  {margin:0 0 -1px -200px; left:2px; vertical-align:bottom; padding:100px 0 10px; border-width:0 1px 1px 1px; z-index:1;}