JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="dev_calc">
    <div id="dc_send_box">
        <input type="text" name="url" id="dc_input_url" value="" />
        <p class="yellow_button" id="dc_send_button">Провести расчет</p>
    </div>
    
    <div id="error_box">
        <p id="error_head">Ошибка. Мы не работаем с машинами старше 5 лет</p>
        <p id="error_descr">Доставка такой машины в Россию, не целесообразна, так-как облагается дополнительными налогами.</p>
    </div>
    <div id="loading_box">
        <p id="load_head">Загрузка данных</p>
        <img id="load_icon" src="http://images.wikia.com/tibia/en/images/6/6c/Minimap_Loading.gif" alt="" />
    </div>
    <div id="sucsess_box">
        <div id="s_left">
            <p id="s_left_head">Выбранный автомобиль</p>
            <img id="current_auto_img" src="http://i.ebayimg.com/00/s/NDUwWDgwMA==/z/YOMAAOxyZwpSV8oE/$(KGrHqRHJFUFI3qSRHvpBSV8oEQeqg~~48_1.JPG" alt="Онлайн калькулятор растаможки" />
            <div class="sb_string"><span>Год</span><span id="sbls1">2012</span></div>
            <div class="sb_string"><span>Пробег</span><span id="sbls2">62950</span></div>
            <div class="sb_string"><span>Тип двигателя</span><span id="sbls3">55 кВт (75 PS)</span></div>
            <div class="sb_string"><span>Мощность</span><span id="sbls4">62950</span></div>
            <div class="sb_string"><span>КП</span><span id="sbls5">Механическая коробка передач</span></div>
            <div class="sb_string"><span>Объем</span><span id="sbls6">999</span></div>
        </div>
        <div id="s_right">
            <p id="s_right_head">Доставка этого авто</p>
            <div class="sb_string"><span>Утилизационный сбор</span><span id="sbrs1">2012</span></div>
            <div class="sb_string"><span>Расчет таможенных платежей</span><span id="sbrs2">62950</span></div>
            <div class="sb_string"><span>Расчет таможенных сборов</span><span id="sbrs3">55 кВт (75...

CSS

body {
    width:940px;
    background:#fff !important;
}
#dev_calc {
    width: 900px;
    min-height: 500px;
    background: #E9E9E9;
    padding:20px;
}
#dc_input_url, #dc_send_button {
    display:inline-block;
}
#dc_input_url {
    height: 35px;
    width: 735px;
}
#error_box {
    background: rgb(231, 0, 0);
    color: white;
    padding: 20px;
    margin: 20px auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#error_head {
    font-size: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fff;
    margin-bottom: 15px;
}
#loading_box {
    background: url(http://vikupavto24.ru/modules/mod_yapointer/tmpl/fancybox_overlay.png);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
#load_icon {
    position: relative;
    left: 175px;
}
#load_head {
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    position: absolute;
    left: 355px;
    top: 170px;
}
#s_left {
    background: #E0E0E0;
    width: 370px;
    padding: 25px 0;
    margin: 15px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 45px;
    padding: 25px;
    -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    border: 1px solid #A0A0A0;
}
#s_right {
    background: #91E6B7;
    width: 375px;
    padding: 25px 0px;
    margin: 15px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 25px;
}
#s_left, #s_right {
    display:inline-block;
    vertical-align:top;
}
.sb_string {
    padding-bottom: 5px;
    margin: 5px auto;
    font-size: 17px;
    border-bottom: 1px solid #000;
    position:relative;
}
.sb_string:last-child {
    border:0px;
}
.sb_string span:last-child {
    position:absolute;
   ...