JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="message_box" class="ajax_window">
    <p class="window_head">Связь с нами</p>
    <div class="black_clear"></div>
    <table>
    <tr>
        <td>Ваше имя</td>
        <td><input type="text" name="name" id="input_name" value="" /></td>
    </tr>
    <tr>
        <td>Телефон <span class="red_star">*</span></td>
        <td><input type="text" name="phone" id="input_phone" value="" /></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><input type="text" name="email" id="input_email" value="" /></td>
    </tr>
</table>
        <div class="blue_button">
            <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);