JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="work">
	<h2>Примеры работ</h2>
	<hr>
	<h3>Рабочие процессы и результат со строительных площадок</h3>
	<div class="container work-item">
		<div class="row">
			<div class="col-lg-5">
				<div class="work_example">
					<div class="work_example-text">
						<span>Монолитный цокольный этаж</span>
						<p>Объект:        п. Саперный
							<br />Площадь:       144 м.кв.
							<br />Начало:        12.05.2017 г.
							<br />Окончание: 19.05.2017</p>
					</div>
					<ul class="work_example-accordeon">
						<li data-src="img/images/b/1.jpg" title="Image 1"><img src="img/images/1.jpg"></li>
						<li data-src="img/images/b/2.jpg" title="Image 2"><img src="img/images/2.jpg"></li>
						<li data-src="img/images/b/3.jpg" title="Image 3"><img src="img/images/3.jpg"></li>
						<li data-src="img/images/b/1.jpg" title="Image 4"><img src="img/images/1.jpg"></li>
						<li data-src="img/images/b/2.jpg" title="Image 5"><img src="img/images/2.jpg"></li>
						<li data-src="img/images/b/3.jpg" title="Image 6"><img src="img/images/3.jpg"></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-7">
				<img src="img/images/b/1.jpg" alt="" class="works_big-one">
			</div>
		</div>
	</div>
	<div class="container work-item">
		<div class="row">
			<div class="col-lg-7">
				<img src="img/images/b/1.jpg" class="works_big-one">
			</div>
			<div class="col-lg-4">
				<div class="work_example">
					<div class="work_example-text">
						<span>Демонтаж, монолитна плита<br />300мм с ростверком вниз<br /> высотой 800мм и теплыми полами</span>
						<p>Объект:        п. Саперный
							<br />Площадь:       144 м.кв.
							<br />Начало:        12.05.2017 г.
							<br />Окончание: 19.05.2017</p>
					</div>
					<ul class="work_example-accordeon">
						<li...

CSS

.work_example-accordeon li{
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  list-style-type: none;
  cursor: pointer;
}

JavaScript

var work = document.querySelector('.work');

work.addEventListener('click', function (event) {
  var t = event.target||event.srcElement;
  var srcImg = t.parentNode.getAttribute('data-src'),
      titleImg = t.parentNode.getAttribute('title'),
      workItem = t.closest('.work-item'),
      largeImg = workItem.querySelector('.works_big-one');

      showThumbnail(srcImg, titleImg, largeImg);
});


function showThumbnail(href, title, img) {
  img.src = href;
  img.alt = title;
}