JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>
<div class="item">
	<div class="title">Наименование товара</div>
	<img src="http://jsfiddle.net/img/logo.png">
</div>    
<div class="clear"></div>
<div class="show_more">Показать еще<span>4</span></div>
</div>

CSS

.items{
    width: 620px;
    position: relative;
}
	.item{
		width: 150px;
		float: left;
		margin: 10px 5px 10px 0;
		position: relative;
		background: #777;
	}
		.item img{
			padding: 25px 0;
		}
.items{
    width: 620px;
    position: relative;
}
	.item{
		width: 150px;
		float: left;
		margin: 10px 5px 10px 0;
		position: relative;
		background: #777;
        display: none;
	}
		.item img{
			padding: 25px 0;
		}
.clear{
    clear: both;
    width: 100%;
    height: 1px;
}
.show_more{
	padding: 5px;
    background: rgb(34, 133, 176);
    color: #fff;
    width: 180px;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}
	.show_more span{
		display: none;
	}

JavaScript

$(document).ready(function(){
	var nowShow = 4;
	ShowMore(nowShow);
	$(document).on('click', '.show_more', function () {
		nowShow = nowShow + 4;
		ShowMore(nowShow);
		if($('.item').length <= nowShow){
			$('.show_more').hide();
		}
	});
})
function ShowMore(n){
	var i = 1;
	$('.item').each(function(m){
		$(this).show();
		if(i == n){
			return false;
		}
		i++;
	})
}