JSFiddle - React, Tailwind, and code Playground

HTML

<section class="page-work row" id="work">
	<div class="container">
		<h1 class="col-xs-12">our work</h1>
		<p class="col-xs-12">Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p>
		<div class="work-title">
			<span>PORTFOLIO</span>
			<ul class="work-title-filter">
				<li class="work-filter-selected"><a rel="all">All</a></li>
				<li><a rel="photo">Photography</a></li>
				<li><a rel="logo">Logo design</a></li>
				<li><a rel="web">Web design</a></li>
			</ul>
		</div>
		<ul class="work-gallery">
			<li class="image-box" rel="photo">
				<a href="assets/work_img1.jpg" title="Aenean a elit">
					<img src="assets/work_img1.jpg" alt="" width="260px" height="200px" />
					<div class="img-hover"></div></a>
				<div class="img-description">Aenean a elit</div>
			</li>
			<li class="image-box" rel="photo">
				<a href="assets/work_img1.jpg" title="Aliquam">
					<img src="assets/work_img1.jpg" alt="" width="260px" height="200px" />
					<div class="img-hover"></div></a>
				<div class="img-description">Aliquam</div>
			</li>
			<li class="image-box" rel="logo">
				<a href="assets/work_img1.jpg" title="Suspendisse libero">
					<img src="assets/work_img1.jpg" alt="" width="260px" height="200px" />
					<div class="img-hover"></div></a>
				<div class="img-description">Suspendisse libero</div>
			</li>
			<div class="image-box" rel="web">
				<a href="assets/work_img1.jpg" title="Maecenas fringilla">
					<img src="assets/work_img1.jpg" alt="" width="260px" height="200px" />
					<div class="img-hover"></div></a>
				<div class="img-description">Maecenas fringilla</div>
			</div>
			<li class="image-box" rel="web">
				<a href="assets/work_img1.jpg" title="Donec vehicula">
					<img src="assets/work_img1.jpg"...

CSS

/*---------WORK----------------------------*/
.page-work{
	background:  #81a256 url(../assets/work-back.png) no-repeat;
	padding-top:5%;
	text-align: center;
	padding-bottom:5%;
}
.page-work h1{
	text-transform: uppercase;
}
.work-title{
	clear:left;
	border-top:1px solid #94b963;
	border-bottom:1px solid #94b963;
	padding-top:5%;
	padding-bottom:3%;
	margin-bottom: 5%;
}
.work-title span{
	display: block;
	margin-bottom:5%;
	font-size:20px;
}
.work-title-filter{
	list-style: none;
	padding:0;
}
.work-title-filter li{
	display: inline-block;
	margin-left:2%;
	padding:1% 2%;
	border-radius:4px;
	font-size:16px;
}
.work-title-filter li:hover{
	background-color:  #f5c149;
}
.work-title-filter a{
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}
.work-title-filter li:first-child{
	margin-left:0;
}
.work-filter-selected{
	background-color:  #f5c149;
}
.work-gallery{
	list-style: none;
	padding:0;
	margin:0;
}
.image-box{
	margin-bottom: 3%;
	position:relative;
	width:260px;
	margin:0 auto;
	margin-bottom: 3%;
}
.image-box img{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.img-description{
	width:100%;
	color:  #727272;
	background-color:  #eeeeee;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	text-transform: uppercase;
	padding: 20px 0;
	position:relative;
}
.img-description::before{
	content:'';
	display:block;
	position:absolute;
	left:110px;
	top:-38px;
	border: 20px solid transparent; /* Прозрачные границы */
  border-bottom: 18px solid #eee;
}
.img-hover{
	position:absolute;
	width:100%;
	height:200px;
	top:0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background:  rgba(61, 77, 41, 0.7) url(../assets/hover-img.png) no-repeat center;
}
/*---------END WORK-----------*/

JavaScript

jQuery(document).ready(function($){
	/*------Hover effect on img in gallery--------*/
	$('.img-hover').hide();
	$('.image-box').hover(function(){
			$('.img-hover', this).show();
		}, function(){
			$('.img-hover', this).hide();
		}
	);
	/*------END Hover effect on img in gallery--------*/
	
	/*------------portfolio filter--------------*/
	
	var imgHeight = $('.image-box').height();
	var tempItem = '[rel=' + $('.work-filter-selected').children('a').attr('rel') + ']';
	
	$('.work-title-filter li a').click(function() {
		
    $('.work-title-filter li').removeClass('work-filter-selected');
    $(this).parent('li').addClass('work-filter-selected');
		
		
	var thisItem = '[rel=' + $(this).attr('rel') + ']';
	
	if (thisItem == "[rel=all]") {
		thisItem = "";
	}

	if (tempItem == "[rel=all]") {
		tempItem = "";
	}
	
	$('.image-box' + tempItem).slideUp("slow", function() { $('.image-box' + thisItem).slideDown("slow"); } );
	
	tempItem = thisItem;

	});
	/*------------END portfolio filter--------------*/
});