JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://houseinvest.com.ua/templates/construction/css/template.css">
<script src="http://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300"></script>
<link rel="stylesheet" href="http://houseinvest.com.ua/templates/construction/css/jquery.lightbox-0.5.css">
<script src="http://www.xiper.net/examples/js-plugins/gallery/lightbox/js/jquery.lightbox-0.5.js"></script>
<div id="build_calculator">

    <div id="main_head">
        <p class="head_navi" id="next_button">Или создайте свой проект »</p>
        <p class="head_navi" id="back_button">« Предыдущий шаг</p>
    </div>    
    
<div id="list_1" class="lst">
    <div class="list_head">
        <p class="red_h">Выберите готовый проект :</p>
        <p class="step_descr"></p>
    </div>
    <div class="list_select">
        <select id="list_select_1">
            <option value="1">Проект дома номер 1</option>
            <option value="2">Проект дома номер 2</option>
        </select>
    </div>
    
    <div class="item_1 show" >
        <p class="small_descr">
            Односемейный котедж одноэтажный с жилой мансардой 
            <br /> 
            5 комнат, 1 кухня, 2 ваннные комнаты, котельная, камин
        </p>
        <p class="big_descr_head">Базовая комплекция включает:</p>
        <div class="big_descr">
            <p>Фундамент: Ленточно-столбчатый с монолитной плитом</p>
            <p>Стены: SIP-панели 160мм</p>
            <p>Межэтажные перекрытия: SIP панели 202мм</p>
            <p>Кровля: SIP-панели 160мм</p>
            <p>Доставка домокомлекта на участок заказчика*</p>
            <p>Сборка домокомлекта на участке заказчика**</p>
        </div>
        <p class="bottom_descr">
            * - доставка в пределах 35км от киева. Свыше цена договорная 
            <br /> 
            ** - заказчик обязан предоставить место для проживания строй бригады
        </p>
        <div class="ib image_box_1">
            <a...

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/RjgO7rYTmqiVp7vzi-Q5UT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
    background:white !important;
}
input, textarea, input:active, textarea:active, *:focus {
    outline: none;
}
#build_calculator {
    min-height:700px;
    width:900px;
    padding:30px;
    position:relative;
}
#build_calculator input {
border-radius: 5px;
color: #414040;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #FFF;
margin: 2px;
border: 1px solid #D7D7D7;
}
#build_calculator textarea {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
color: #414040;
padding: 5px;
background-color: #FFF;
margin: 1.99653px;
border: 1px solid #D7D7D7;
min-width: 900px;
height: 150px;
}
.list_select {
    background: url("http://houseinvest.com.ua/templates/construction/images/arrow.png") no-repeat scroll 10px center transparent;
    border: 2px solid #B0B0B0;
    border-radius: 3px 3px 3px 3px;
    height: 34px;
    overflow: hidden;
    width: 295px;
    position: absolute;
    top: 100px;
}
.list_select select {
background: none repeat scroll 0 0 transparent;
border: 0 none;
color: #7A7A7A;
font-family: "Open Sans";
font-size: 18px;
padding: 3px 0px 4px 39px;
width: 295px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
}
#main_head {
    height:70px;
}
.red_h {
    color: #a80000;
    font-family: arial;
    font-weight: bold;
    font-size: 23px;
    cursor: pointer;
    padding: 5px;
    display:inline;
}
.step_descr {
  display:inline;  
  font-size: 23px;
  font-family: "Open Sans";
}
.list_head {
position: absolute;
top: 55px;
}
.small_descr {
font-size: 17px;
font-family: "Open Sans";
color: #a90100;
width: 500px;
position: absolute;
top:...

JavaScript

$('#list_1').show('fade',100).addClass('active_list');
load_lightbox('#list_1');
$('#back_button').hide('fade',1);

$("select").change(function () {
    var true_path = $(this).val();
    var parent = "#" + $(this).parent().parent().attr('id'); 
    $(parent + ' .show').hide('fade',500).removeClass('show');
    var repl = parent + ' .item_' + true_path;
    setTimeout(function(){
        $(repl).show('fade',500).addClass('show');
        if (parent !== "#list_1") {
            re_count(parent);
        }
    },500);
});
$('#next_button').click(function () {
    var active_list = $(this).parent().parent().find('.active_list').attr('id');
    if (active_list !== "fin_list") {
        $('#' + active_list).hide('fade',500).removeClass('active_list');
        var num_list = active_list.replace("list_","");
        var list_count = $('.lst').length;
        num_list = parseInt(num_list) + 1;
        if (num_list+1 > list_count) {
            setTimeout(function(){
                $("#fin_list").show('fade',500).addClass('active_list');
                num_list = parseInt(num_list) - 1;
                var fin = $('#list_' + num_list + ' .cost').text();
                $('.final_cost_count').text(fin);
                $("#next_button").hide('fade',150);
            },500);
        }
        else {
            num_list = '#list_' + num_list;
            load_lightbox(num_list);
            setTimeout(function(){
                $(num_list).show('fade',500).addClass('active_list');
                re_count(num_list);
            },500);
        };
    }
    if ($("#back_button").is(":hidden") == true) {
        $("#next_button").hide('fade',500)
        setTimeout(function(){
            $("#back_button").show('fade',500);
            $("#next_button").text('Следующий шаг »').show('fade',500);
        },500);
    }
});
$('#back_button').click(function () {
    var active_list = $(this).parent().parent().find('.active_list').attr('id');
    $('#' +...