JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<script src="http://rlexpert.ru/templates/real/javascript/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="http://rlexpert.ru/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://rlexpert.ru/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/jquery.fancybox.css">
<div class="full_boxs t_full_boxs" id="t_full_boxs2">
    <div class="gray_box">
		<div class="gray_box_inner">
			<div class="gray_box_head_wrapper">
				<h2 class="gray_box_head">СТОИМОСТЬ</h2>
			</div>
            <table id="t_table_3">
                <tr>
                    <td></td>
                    <td><p class="t_td_head">«В суд сам»</p>Подготовка экспертизы и пакета документов </td>
                    <td><p class="t_td_head">«Максимум выплат»</p> Комплекс услуг по предоплате</td>
                    <td><p class="t_td_head" style="letter-spacing: -1.3px;">«Не хочу платить сейчас»</p> Комплекс услуг с оплатой после суда</td>
                    <td><p class="t_td_head">«Я виноват»</p> Защита виновника ДТП <br /> в суде</td>                    
                </tr>
                <tr>
                    <td>Консультация с экспертом и юристом перед заключением договора</td>
                    <td><img class="t_minus" src="http://rlexpert.ru/templates/real/images/plus_32.png" alt=""/></td>
                    <td><img class="t_minus" src="http://rlexpert.ru/templates/real/images/plus_32.png" alt=""/></td>
                    <td><img class="t_minus" src="http://rlexpert.ru/templates/real/images/plus_32.png" alt=""/></td>
                    <td><img class="t_minus" src="http://rlexpert.ru/templates/real/images/plus_32.png" alt=""/></td>
                </tr>
                <tr>
                    <td>Выезд эксперта на осмотр по Москве</td>
                    <td><img class="t_minus"...

CSS

body {
    width:940px;
}
.red_mrk {
    background: url('http://rlexpert.ru/templates/real/images/t_mark.png') 355px 160px no-repeat;
}
.t_minus {
    display: block;
    margin: 0 auto;
}
#t_table_3 tr td:first-child {
    width:175px !important;
}
#t_table_3 td {
    width:191px;
}
#t_table_3 tr:first-child {
    text-align:center;
}
#t_table_3 tr:first-child td {
    padding-bottom: 7px;
}
.t_td_head {
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 18px;
}
.tr_clear {
    background: #dedede !important;
}
.t_price_gray {
    background: #898989;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 20px 15px 0px 15px;
    cursor:pointer;
}
.t_price_blue {
    background: #3498db;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    margin: 20px 15px 0px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor:pointer;
}
.t_price_red_round {
    background: #EF4D37;
    color: #ffffff;
    font-size: 18px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    text-align: center;
    margin: -6px 15px 0px 15px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 10px 10px 10px;
    cursor:pointer;
    border-top: 1px solid #CFCFCF;
}

JavaScript

$(".t_price_blue,.t_price_gray,.t_price_red_round").click(function() {
    var pr_category = "";
    var pr_text = $(this).data('name_category');
    var pr_cost = $(this).text();
    $("#pr_category_select").text(pr_category);
    $("#pr_select").text(pr_text);
    $("#pr_cost").text(pr_cost);
});
$('.t_price_blue,.t_price_gray,.t_price_red_round').click(function () {
	$('#shadow_box').show('fade',500);
	scroll_to_elem('shadow_box',500);
	$('#pr_out_box').show('fade', 300);
});