JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<script src="http://xn--80ajbtezcggn9i.xn--p1ai/printThis.js"></script>
<div id="mt_main_box" class="window">
    <div id="mt_form_holder">
        <div id="mt_form">
            <p class="st_head">Составление телеграммы</p>
		    <p class="st_sub_head_red"></p>
            <img class="mt_close" src="http://rlexpert.ru/templates/real/images/close_icon.png" alt="" />
		    <p class="mt_form_p">Адрес получателя телеграммы:</p>
            <input type="text" name="mt_adress" id="mt_adress" value="" />
            <p class="mt_form_p">Кому будет обращена телеграмма:</p>
            <div class="mt_check_box">
                <img id="mtch1" class="checked_circle" data-checked="false" src="http://rlexpert.ru/templates/real/images/circle_check.png" alt="Акт осмотра" />
                <span>Юридическое лицо (или Страховая компания)</span>
            </div>
            <div class="mt_check_box">
                <img id="mtch2" class="checked_circle" data-checked="true" src="http://rlexpert.ru/templates/real/images/circle_check_active.png" alt="Акт осмотра" />
                <span>Физическое лицо</span>
            </div>
            <p class="mt_form_p">ФИО или наименование организации:</p>
            <input type="text" name="mt_name" id="mt_name" value="" />
            <div class="block_separator"></div>
            <p class="mt_form_p">Марка автомобиля:</p>
            <input type="text" name="mt_mark" id="mt_mark" value="" />
            <p class="mt_form_p">Регистрационный номер:</p>
            <input type="text" name="mt_number" id="mt_number" value="" />
            <div class="block_separator"></div>
            <p class="mt_form_p">Место осмотра:</p>
            <input type="text" name="mt_place" id="mt_place" value="" />
            <p class="mt_form_p">Дата осмотра:</p>
            <input type="text" name="mt_date" id="mt_date" value="" />
            <p class="mt_form_p">Время...

CSS

body {
    background: url(http://vikupavto24.ru/modules/mod_yapointer/tmpl/fancybox_overlay.png);
}

#mt_t_box {
    display: none;
    margin: 53px 0px 0px 60px;
}
#mt_main_box {
    padding: 20px 40px 35px 40px;
    min-height: 415px;
    background: #FAFAFA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    top:50px;
}
#mt_form_holder {
    width: 350px;
}
#mt_form input{
    width: 100%;
}
#ui-datepicker-div {
font-size: 12px;
}
.mt_form_p {
margin: 5px 0px;
}
.block_separator {
width: 100%;
height: 2px;
margin: 20px 0px;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,163,204,0.82) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,163,204,0.82)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 163, 204, 0.82) 0%,rgba(0, 0, 0, 0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,163,204,0.82) 0%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,163,204,0.82) 0%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center, rgba(0, 163, 204, 0.82) 0%,rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d100a3cc', endColorstr='#00000000',GradientType=1 );
}
.mt_check_box .checked_circle {
    position: relative;
    top:1px;
    cursor:pointer;
}
.mt_check_box {
    margin: 10px 0px 10px 5px;
}
#mt_print {
    background: #00A3CC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #FFF;
    font-size: 18px;
    line-height: 45px;
    padding: 0 25px;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: background 0.5s ease-in;
    -moz-transition: background 0.5s ease-in;
    -o-transition: background 0.5s ease-in;
    -ms-transition: background 0.5s ease-in;
   ...

JavaScript

$( "#mt_date" ).datepicker({
      showOn: "button",
      buttonImage: "http://vikupavto24.ru/modules/mod_yapointer/tmpl/calendar-blue.png",
      buttonImageOnly: true,
      minDate: 0, 
      maxDate: "+1M +20D",
      firstDay: 1
});
$( "#mt_date" ).datepicker( "option", "dateFormat", "dd.mm.yy");
$( "#mt_date" ).datepicker( $.datepicker.regional[ "ru" ] );

$("#mt_main_box .checked_circle").click(function () {
    if ($(this).data("checked") == true) {}
    else {    
    $("#mt_main_box .checked_circle").data("checked",false).attr("src","http://rlexpert.ru/templates/real/images/circle_check.png");
    $(this).data("checked",true).attr("src","http://rlexpert.ru/templates/real/images/circle_check_active.png");
    }
});
$("#mt_generate").click(function () {
    if (if_valid() == true) {
        $("#mt_t_top_box").text($("#mt_adress").val() + " , " + $("#mt_name").val());
        $("#mt_t_bottom_box").text($("#mt_sender_fio").val() + " , " + $("#mt_sender_adress").val() + " , " + $("#mt_sender_phone").val());
        if($("#mtch1").data("checked") == true) {
            $("#mt_t_textarea").html("Просим Вас или Вашего представителя прибыть на осмотр аварийного автомобиля марки: " + $("#mt_mark").val() + " регистрационный номер " + $("#mt_number").val() + "\nПроводимого по адресу: " + $("#mt_place").val() + ".\nОсмотр состоится " + $("#mt_date").val() + " в " + $("#mt_time").val() + "\nВ случае неявки акт осмотра будет составлен без Вашего участия.");
        }
        if($("#mtch2").data("checked") == true) {
            $("#mt_t_textarea").html("Просим Вас или Вашего представителя прибыть на осмотр аварийного автомобиля марки: " + $("#mt_mark").val() + " регистрационный номер " + $("#mt_number").val() + "\nПроводимого по адресу: " + $("#mt_place").val() + ".\nОсмотр состоится " + $("#mt_date").val() + " в " + $("#mt_time").val() + "\nВ случае неявки акт осмотра будет составлен без Вашего участия.");
        }
       ...