JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<p class="c_block_head">Контакты</p>
<div id="c_two_columns_block">
    <div class="c_left_column">
        <h2>Офис – метро «Сокол»  </h2>
        <div class="c_table_block" id="ctb1">
            <p>Адрес:</p>
            <p>125080, г. Москва, ул. Панфилова, д.4 ,к.3</p>
        </div>
        <div class="c_table_block" id="ctb2">
            <p>Телефон/факс:</p>
            <p>(495) 255-03-63</p>
        </div>
        <div class="c_table_block" id="ctb3">
            <p>Время работы:</p>
            <p>Пн - Пт, с 10-00 до 19-00. Сб, Вс - выходной</p>
        </div>
        <p class="c_block_head">Схема проезда</p>
        <img src="http://nephalemcube.ru/rle/templates/real/images/adress1.jpg" alt="ул. Панфилова, д.4" />
        <a class="c_print_button" href="http://rlexpert.ru/Download/kontakty_realexpert.pdf"><img src="http://nephalemcube.ru/rle/templates/real/images/print_adress.png" alt="" /></a>
    </div>
    <div class="c_right_column">
        <h2>Офис – метро «Каширская» </h2>
        <div class="c_table_block" id="ctb1">
            <p>Адрес:</p>
            <p>Адрес: 115201, г. Москва,  1-й Котляковский переулок, дом 1</p>
        </div>
        <div class="c_table_block" id="ctb2">
            <p>Телефон/факс:</p>
            <p>(495) 255-03-63</p>
        </div>
        <div class="c_table_block" id="ctb3">
            <p>Время работы:</p>
            <p>Пн - Пт, с 10-00 до 19-00. Сб, Вс - выходной</p>
        </div>
        <p class="c_block_head">Схема проезда</p>
        <img src="http://nephalemcube.ru/rle/templates/real/images/adress2.jpg" alt="1-й Котляковский переулок, дом 1" />
        <a class="c_print_button" href="http://rlexpert.ru/Download/kontakty_realexpert.pdf"><img src="http://nephalemcube.ru/rle/templates/real/images/print_adress.png" alt="" /></a>
    </div>
    <div class="c_switch_sep_first"></div>
<img id="c_switch_qr"...

CSS

.c_left_column, .c_right_column {
    width:460px;
}
body {
    width:940px;
}
.c_right_column {
  margin-left:15px;
}
.c_table_block { 
    width:460px;
}
#c_two_columns_block h2 {
    margin-left: 10px;
    font-weight: bold;
    font-size: 20px;
    margin-bottom:5px;
}
.c_block_head {
    padding: 10px 0px 5px 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 23px;
}
a.c_print_button {
    position: absolute;
    margin-top: -40px;
    margin-left: 140px;
}
#c_switch_qr {
    margin: 25px 140px;
}
.c_switch_sep_first {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.41) 0%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 96%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.41)), color-stop(67%,rgba(0,0,0,0)), color-stop(96%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.41) 0%,rgba(0, 0, 0, 0) 67%,rgba(0, 0, 0, 0) 96%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.41) 0%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 96%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.41) 0%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 96%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.41) 0%,rgba(0, 0, 0, 0) 67%,rgba(0, 0, 0, 0) 96%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69000000', endColorstr='#00000000',GradientType=1 );
    height: 3px;
    position: relative;
    top: 10px;
}
.c_switch_sep_second {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.41) 0%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 96%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.41)), color-stop(67%,rgba(0,0,0,0)), color-stop(96%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.41) 0%,rgba(0, 0, 0, 0) 67%,rgba(0, 0, 0, 0) 96%);
    background: -o-radial-gradient(center,...