JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="info_box" class="ajax_window">
    <p class="window_head">Соглашение</p>
    <div class="black_clear"></div>
    <div class="text_block">
    <p>Соглашение об обработке персональных данных.</p>
<p>Данное соглашение об обработке персональных данных разработано в соответствии с законодательством Российской Федерации.</p>
<p>Все лица заполнившие сведения, составляющие персональные данные на данном сайте, а также разместившие иную информацию обозначенными действиями подтверждают свое согласие на обработку персональных данных и их передачу оператору обработки персональных данных.</p>
<p>
Под персональными данными Гражданина понимается нижеуказанная информация:</p>
<p>общая информация (Имя, номер телефона и адрес электронной почты); посетители сайта направляют свои персональные данные для получения юридических услуг в дальнейшем.</p>
<p>Гражданин, принимая настоящее Соглашение, выражают свою заинтересованность и полное согласие, что обработка их персональных данных может включать в себя следующие действия: сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, уничтожение.</p>
    <p>Гражданин гарантирует: информация, им предоставленная, является полной, точной и достоверной; при предоставлении информации не нарушается действующее законодательство Российской Федерации, законные права и интересы третьих лиц; вся предоставленная информация заполнена Гражданина в отношении себя лично.</p>
    </div>
        <div class="blue_button close_ver">
            <p>Закрыть</p>
        </div>
    <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_close.png" class="close_button"alt=""/>
</div>

CSS

body {
    background:url('http://vikupavto24.ru/modules/mod_yapointer/tmpl/fancybox_overlay.png');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/RjgO7rYTmqiVp7vzi-Q5UT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#message_box {display:none;}
.ajax_window {
    width:460px;
    background:#fafaf9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-bottom:15px;
    position:relative;
    border: 1px solid #DBDBDB;
}
.window_head {
    padding: 10px;
    text-align: center;
    font-size: 23px;
    font-family: 'Open Sans';
    color: #0688D8;
}
.black_clear {
    margin: 0px 0px 15px 0px;
    height: 1px;
    border-bottom: 1px solid #BEBEBE;
}
.ajax_window td {
    vertical-align:top;
    font-size:17px;
}
#message_box table {
    border-spacing: 15px 15px;
    margin-left: 15px;
}
#message_box input{
    width: 285px;
    font-size:16px;
}
#message_box textarea {
    width: 265px;
    padding:10px;
    font-size:16px;
}
.blue_button {
    background: #77bfed;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#77bfed), to(#0688d8));
    background: -webkit-linear-gradient(#77bfed 0%, #0688d8 100%);
    background: -moz-linear-gradient(#77bfed 0%, #0688d8 100%);
    background: -o-linear-gradient(#77bfed 0%, #0688d8 100%);
    background: linear-gradient(#77bfed 0%, #0688d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77bfed', endColorstr='#0688d8',GradientType=0 );
    height:45px;
    width:210px;
    margin:0px auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
}
.blue_button p {
    vertical-align: middle;
    color: #FFF;
    font-size: 17px;
    padding-top: 12px;
    font-weight: bold;
   ...

JavaScript

var w = ($(window).width() - $('#message_box').width()) / 2;
var h = ($(window).height() - $('#message_box').height()) / 2;
$('#message_box').css('left', w);
$('#message_box').css('top', h);