JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="pr_hold">
    <div id="pr_navigation">
        <div class="pr_navigation_button active" data-nav="all">
            <div><p>Все</p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="1">
            <div><p>Оценка ущерба</p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="2">
            <div><p>Оценка земли</p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="3">
            <div><p>Оценка недвижимостим и сооружений</p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="4">
            <div><p>Оценка машин и оборудования</p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="5">
            <div><p>Оценка транспорта и спецтехники </p></div>
            <div></div>
        </div>
        <div class="pr_navigation_button" data-nav="6">
            <div><p>Прочее</p></div>
            <div></div>
        </div>
    </div>
    <div id="pr_head">
        <p id="pr_head_column_title1">Наименование видов объектов оценки и оценочных услуг</p>
        <p id="pr_head_column_title2">Стоимость услуги, руб.</p>
        <p id="pr_head_column_title3">Срок выполнения, рабочих дней</p>
    </div>
    <div class="pr_category" data-category="1">
        <div class="pr_category_head"><h2>Оценка ущерба причиненного имуществу</h2></div>
        <div class="pr_category_table">
            <div class="pr_category_subhead"><p>Оценка транспортных средств после ДТП (ущерб)</p></div>
            <table>
				<tr>
					<td>до 10 поврежденных элементов</td>
					<td>4000</td>
					<td>1</td>
					<td><img src="http://rlexpert.ru/templates/real/images/order_now.png" alt="" /></td>
				</tr>
				<tr>
					<td>от 10 до 20 поврежденных...

CSS

#pr_hold {
    width:1000px;
}
.pr_navigation_button {
    display: inline-block;
    width: 129.5px;
    margin-right: 9px;
    height: 60px;
    background: #f5f9f0;  background: -moz-linear-gradient(top, #f5f9f0 0%, #d9e6eb 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f9f0), color-stop(100%,#d9e6eb));  background: -webkit-linear-gradient(top, #f5f9f0 0%,#d9e6eb 100%);  background: -o-linear-gradient(top, #f5f9f0 0%,#d9e6eb 100%);  background: -ms-linear-gradient(top, #f5f9f0 0%,#d9e6eb 100%);  background: linear-gradient(to bottom, #f5f9f0 0%,#d9e6eb 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f9f0', endColorstr='#d9e6eb',GradientType=0 );
    border: 1px solid #C0C0C0;
    -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;
    vertical-align: top;
    cursor: pointer;
    -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    0px 2px 8px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         0px 2px 8px 0px rgba(50, 50, 50, 0.3);
}
#pr_navigation {
    margin-top: 20px;
}
.pr_navigation_button p, .pr_navigation_button span {
    vertical-align: initial;
    text-align: center;
    font-size: 13px;
    color: #4E4E4E;
}
.pr_navigation_button div:first-child {
    display: inline-block;      vertical-align:middle;
    width: 96%;
    position: relative;
    left: 4px;
}
.pr_navigation_button div:last-child {
    display: inline-block;      
    vertical-align:middle;      
    height:100%;      
}
.pr_navigation_button.active {
    background: #f7941d;
    background: -moz-linear-gradient(top, #f7941d 0%, #ffb115 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7941d), color-stop(100%,#ffb115));
    background: -webkit-linear-gradient(top, #f7941d 0%,#ffb115 100%);
    background: -o-linear-gradient(top, #f7941d 0%,#ffb115 100%);
    background: -ms-linear-gradient(top, #f7941d 0%,#ffb115 100%);
   ...

JavaScript

$(".pr_navigation_button").click(function() {
    var cat_number = $(this).data("nav");
    
    if($(this).hasClass("active") == false) {
        $(this).addClass("active");
        $(".pr_category").each(function() {
            if(cat_number !== "all") {
                if ($(this).data('category') == cat_number) {
                    $(".pr_navigation_button:first-child").removeClass("active");
                    $(this).show("fade",100).addClass("active");
                }
                else if ($(this).hasClass("active") == false) {
                    $(this).hide("fade",100);
                }
            }
            else {
                $(".pr_category,.pr_navigation_button").removeClass("active");
                $(".pr_navigation_button:first-child").addClass("active");
                $(".pr_category").show("fade",100);
            }
        });
    }
    else {
        $(this).removeClass("active");
        $(".pr_category").each(function() {
            if ($(this).data('category') == cat_number) {
                $(this).removeClass("active").hide("fade",100);
            }
        });
    }
});

$(".pr_category_table img").click(function() {
    var pr_category = $(this).parents(".pr_category_table").find(".pr_category_subhead p").text();
    var pr_text = $(this).parent().prev().prev().prev().text();
    var pr_cost = $(this).parent().prev().prev().text() + "р.";
    $("#pr_category_select").text(pr_category);
    $("#pr_select").text(pr_text);
    $("#pr_cost").text(pr_cost);
});