JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shares-block">
	<article>
		<h2>Название раздела</h2>
		<a href="#" class="shares-item">
			<img src="http://weknowyourdreamz.com/images/guitar/guitar-05.jpg" alt="guitar" />
			<h3 class="equal">Guitar 12 sstrings Gretch</h3>
			<span>6 strings</span>
		</a>
		<a href="#" class="shares-item">
			<img src="http://weknowyourdreamz.com/images/guitar/guitar-05.jpg" alt="guitar" />
			<h3 class="equal">Guitar</h3>
			<span>6 strings</span>
			<span>12 strings</span>
		</a>
		<a href="#" class="shares-item">
			<img src="http://weknowyourdreamz.com/images/guitar/guitar-05.jpg" alt="guitar" />
			<h3 class="equal">Guitar</h3>
			<span>6 strings</span>
		</a>
		<a href="#" class="shares-item">
			<img src="http://weknowyourdreamz.com/images/guitar/guitar-05.jpg" alt="guitar" />
			<h3 class="equal">Guitar</h3>
			<span>6 strings</span>
			<span>12 strings</span>
		</a>
	</article>
</div>

CSS

div.shares-block h2{
	font-size: 160%;
	font-weight: 700;
	text-transform: uppercase;
}
article a.shares-item{
	display: block;
	float: left;
	width: 10%;
	padding: 1%;
	margin: 1% 1% 0 0;
	text-decoration: none;
	border: 1px solid #ebebeb;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
}
article a.shares-item img{
  display: block;
  max-width: 100%;
	margin: auto;
}
article a.shares-item h3{
	font-size: 120%;
	font-weight: 400;
	text-align: center;
	color: #363b41;
}
article a span{
	display: block;
	padding: 3px 0;
	text-align: center;
	font-size: 90%;
	text-transform: uppercase;
	color: #d14a43;
}