JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<script src="http://brusecostroy.ru/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
<script src="http://brusecostroy.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script src="http://brusecostroy.ru/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/lightbox_context.js?ver=3.8"></script>
<div id="wrapper"><header id="header">
    <div id="header-ins">
        <div id="logo"><a href="/"><img src="/wp-content/themes/Eco/images/logo.png" alt="ЭкоСтрой. Строительство деревянных домов из клееного бруса в Белгороде и Воронеже."/></a></div>
        <div id="top-cont">
            <div class="phone-mob"><span><strong>Мобильный:</strong>&nbsp;&nbsp;+7&nbsp;&nbsp;&nbsp;(920)&nbsp;</span>410 27 77</div>
            <div class="phone"><span><strong>Белгород:</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+7&nbsp;(4722)&nbsp;</span>&nbsp;&nbsp;36 54 34</div>
            <div class="phone"><span><strong>Воронеж:</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+7&nbsp;&nbsp;&nbsp;(473)&nbsp;</span>229 06 43</div>
            <!--<div class="mail"><span>E-mail: </span></div>-->
        </div>
        <div id="top-order">
            <a class="order-butt" href="#"></a>
            <div>&mdash; Это займёт у вас
                &nbsp;&nbsp;&nbsp;&nbsp;менее минуты!</div>
        </div>
        <div id="deviz">Непревзойденное качество по доступной цене!</div>
        <div id="opisanie"><em>Строим качественно современные экологичные деревянные дома из клеёного бруса под ключ <br>в Белгороде и Воронеже по привлекательным ценам.</em></div>
    </div>
</header>
<!-- #header     -->
<div id="top-menu">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/o-kompanii/">О компании</a></li>
        <li><a href="/stroitelstvo/">Строительство</a></li>
        <li><a href="/price/">Стоимость</a></li>
        <li><a href="/galery/">Наши проекты</a></li>
        <li><a href="/category/articles/">Статьи</a></li>
        <li><a...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

header, nav, section, article, aside, footer {
    display: block;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    line-height: 1;
    font: 14px/20px 'PT Sans', Calibri, Arial, Georgia, sans-serif;
    color: #000;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #6b3b2c;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

p {
    margin: 0 0 15px 0;
}
hr {
	clear: both;
	border: none;
	height: 1px;
	background: #fff;
}
.clr {
    clear: both;
}

.right {
    float: right;
}

.left {
    float: left;
}
.alignleft {
float: left;
margin: 0 20px 20px 0;
}
.alignright {
	float: right;
	margin: 0 0 20px 20px;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px 0;
    font-family: inherit;
    font-weight: normal;
    line-height: 20px;
    color: inherit;
}
h1.ttl {
    font-size: 28px;
    color: #6b3b2c;
    text-transform: uppercase;
    padding: 20px 0 45px 0;
}
h2.ttl a {
    font-size: 20px;
    color: #6b3b2c;
    padding: 20px 0 0 0;
    border-bottom: 1px solid #6b3b2c;
    margin-bottom: 20px;
    text-decoration: none;
    width: 70%;
    display: block;
}
#wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
   ...

JavaScript

$(document).ready(function() {




    /* Top menu activation    */
    $("#top-menu a").each(function () {
        if (this.href == location.href)
            $(this).addClass("active");

    });

    $("#sideblock a").each(function () {
        if (this.href == location.href)
            $(this).addClass("active");

    });

    /*  Форма заказа  */
    $('.order-butt').click(function() {
        $('#overlay').fadeIn('slow');
        $('#order-block').delay(500).fadeIn('slow');
    });
    $('#overlay').click(function() {
        $('#overlay').fadeOut('slow');
        $('#order-block').fadeOut('fast');
    });

	
	  $('.main-page-block-text').each(function (i) {
			var hb = $(this).outerHeight();
			$(this).css({marginTop: -hb + "px"});
      });
	
	
	

	$('.popup-button').click(function() {
		 $('.main-page-block-text').removeClass("pop");
		var context = $(this).children('.main-page-block-text');
		var doc_h = ($(window).height() / 2) - ($(context).outerHeight() / 2);

		$('#overlay').fadeIn();
		$(context).fadeIn().addClass("pop");
	});
	
	$('#overlay').click(function() {
        var hb = $(".pop").outerHeight();
		var undeground = parseInt($(window).height()) + parseInt(hb);
		
		console.log(parseInt($(window).height()));
		console.log(parseInt(hb));
		console.log(undeground);
		
		$(".pop").fadeOut();
    });
	
	
	
	
	
	
	
	
	
	
}); /*  all close */