JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div id="gallery-content">
	<h1 class="gallery-h1">Проект дома 210,6 м.кв.</h1>
	<div id="table-block">
		<div class="gallery-preview-wrapper">
			<div class="preview-main-image-wrapper">
				<div class="zoom-zoom"></div>
				<a class="preview-main" href="#"><img src="http://placehold.it/230x150&amp;text=1" alt="" /></a>
			</div>
			<div class="preview-mini-images-wrapper">
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=1" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=2" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=3" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=4" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=5" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=6" alt="" /></a>
				<a class="preview-mini" href="#"><img src="http://placehold.it/73x52&amp;text=7" alt="" /></a>

			</div>
		</div>
		<div class="gallery-table-wrapper">
			<table class="gallery-table">
				<tr>
					<td>Материал</td>
					<td>Стоимость</td>
					<td>Сроки</td>
				</tr>
				<tr>
					<td>Пеноблоки</td>
					<td>
						<div class="price-rub">15000000</div>
					</td>
					<td>14 дней</td>
				</tr>
				<tr>
					<td>Газобетонные<br/>блоки</td>
					<td><div class="price-rub">25000000</div></td>
					<td>34 дня</td>
				</tr>
				<tr>
					<td>Облицовочный<br/>кирпич</td>
					<td><div class="price-rub">25000000</div></td>
					<td>12 дней</td>
				</tr>
				<tr>
					<td>Теплая керамика</td>
					<td><div class="price-rub">35000000</div></td>
					<td>12 дней</td>
				</tr>
				<tr>
					<td>Кирпич</td>
					<td><div class="price-rub">45000000</div></td>
					<td>12 дней</td>
				</tr>
				<tr>
					<td>Железобетон</td>
					<td><div class="price-rub">55000000</div></td>
					<td>12...

CSS

body {
    background-color: #eaf5ff;
    float: left;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
#gallery-content {
    margin: 0 auto;
    width: 685px;
}
#gallery-content * {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.gallery-h1 {
    font-size: 24px!important;
    margin: 0 0 15px;
}
#table-block {
    display: table;
    width: 100%;
}
.gallery-preview-wrapper {
    float: left;
    width: 240px;
}
.preview-main-image-wrapper {
    height: 160px;
    position: relative;
    width: 240px;
}
.zoom-zoom {
    background-image: url(http://i40.tinypic.com/2zgt0mr.png);
    content:"";
    display: block;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
}
.preview-main {
    display: block;
}
.preview-main > img {
    border: 5px solid #ffffff;
    max-height: 150px;
    max-width: 230px;
}
.preview-mini-images-wrapper {
    display: table;
    margin-top: 25px;
    width: 240px;
}
.preview-mini > img {
    border: 1px solid #9e9e9f;
    max-height: 52px;
    max-width: 73px;
}
.preview-mini {
    display: inline-block;
    margin-left: 5px;
    *margin-left: 3px;
    /* IE 6-7 */
    margin-left: 3px\9;
    /* IE 8-9 */
    margin-top: 3px;
    margin-bottom: 0;
}
@-moz-document url-prefix() {
    .preview-mini {
        margin-left: 3px;
    }
}
.preview-mini:nth-of-type(1), .preview-mini:nth-of-type(3n+1) {
    margin-left: 0;
}
.preview-mini:nth-of-type(1), .preview-mini:nth-of-type(2), .preview-mini:nth-of-type(3) {
    margin-top: 0;
}
.gallery-table-wrapper {
    border: 2px solid #666666;
    border-radius: 5px;
    float: right;
    /*width: 445px;*/
}
table.gallery-table, table.gallery-table tr, table.gallery-table tr td {
    border-collapse: collapse;
}
table.gallery-table {
    border: 0 none;    
    overflow: hidden;
    width: 415px;
}
table.gallery-table tr td {
    background-color: #ffffff;
    border-left: 1px solid #999999;
    border-top: 1px...

JavaScript

function bindEvent(element, type, handler) {
    if(element.addEventListener) {
       element.addEventListener(type, handler, false);
    } else {
       element.attachEvent('on'+type, handler);
    }
}

var show_order_form = document.querySelectorAll('.order-it'),
    order_form = document.querySelector('.contact-form-wrapper'),
    close_button = document.querySelector('.close-form');

for (var i = 0; i < show_order_form.length; ++i) {
    var item = show_order_form[i];
    bindEvent(item, 'click', function(e) {
        e.stopPropagation();
        order_form.style.display = 'block';
    });
}

bindEvent(close_button, 'click', function(e) {
    e.stopPropagation();
    order_form.style.display = 'none';
});