JSFiddle - React, Tailwind, and code Playground

by psics

HTML

<div id="callback_link"> </div>
<div id="results"> </div>
<div id="callback_form">
<div id="btn_close"> </div>
<div class="fname">Заказать обратный звонок</div>
<div class="rieltor rform">
<div class="rtop"> </div>
<div class="rmid">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr><th><img title="Давид" src="templates/protostar/images/4.jpg" alt="Давид" width="112" height="112" /></th>
<td><b>Давид</b>
<div class="phones">+7 (905) 625-65-00</div>
<div class="phones">+7 (915) 693-45-08</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="rbot"> </div>
<p id="text">Введите, пожалуйста, свой номер телефона и я обязательно Вам перезвоню в удобное для Вас время.</p>
<small class="big">поля, отмеченные <span class="warning">*</span> - обязательны для заполнения.</small><form id="form" action="javascript:void(0);" method="post">
<table class="feed_table">
<tbody>
<tr>
<td class="field_td">Имя: <span class="warning">*</span> <br /> <input class="name" name="name" type="text" value="" /></td>
<td> </td>
</tr>
<tr>
<td class="field_td">Телефон:<span class="warning">*</span><br /> <input class="phone" name="phone" type="text" value="" /></td>
</tr>
<tr>
<td class="field_td">Удобное время для звонка:<span class="warning">*</span><br /> <input class="time" name="time" type="text" value="" /></td>
</tr>
<tr>
<td><input class="send" name="send" type="submit" value="                                         " /></td>
</tr>
</tbody>
</table>
</form></div>
</div>

CSS

#callback_link {
	width: 290px;
	height: 60px;
	background: url(../images/but_callback.png) no-repeat -18px -18px ;
}

#callback_form {
	width: 430px;
	position: absolute;
	left: 50%;
	margin-top: 10px;
	margin-left: -215px;
	height: 550px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	padding-left: 10px;
}
#btn_close {
	width: 34px;
	height:34px;
	background: url(../images/close.png) no-repeat;
	position: relative;
	top: -15px;
	left:416px;
}

.fname {
	color: #3a7ca4;
	font: normal 18px Tahoma;
	padding-left: 5px;
	margin: 0px 0px 10px 0px;
}
.rieltor TD div.phones {
    background: url("../images/tel.gif") no-repeat scroll 0 3px rgba(0, 0, 0, 0);
    margin: 0 0 2px;
    padding: 5px 0 4px 26px;
}
.rform {
    margin: 0 0 1px;
}
.rieltor {
    margin: 10px 0 0 4px;
    width: 322px;
}
.rieltor div.rtop {
    background: url("../images/mt.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 16px;
    width: 322px;
}
.rieltor div.rmid {
    background: url("../images/mm.gif") repeat-y scroll 0 0 rgba(0, 0, 0, 0);
    padding: 5px 10px;
}
.rieltor div.rbot {
    background: url("../images/mb.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 6px;
    width: 322px;
}
.rieltor TH {
    padding: 0 10px 0 0;
}
#html_table TR {
    vertical-align: top;
}

.rieltor TD B {
    color: #494949;
    display: block;
    font: bold 13px Tahoma;
    margin: 0 0 4px;
}
.rieltor TD {
    color: #494949;
    font: bold 13px Tahoma;
    padding: 0;
}
#text{
	width: 410px;
	color: #4F4F4F;
    font-size: 12px;
}
SMALL.big {
    color: #7E7E7E;
    display: block;
    font: 12px Tahoma;
    margin: 0 0 10px;
}
.big span, .warning  {
	color: red;
}
.feed_table {
	width: 410px;
}
.error {
	color: red;
	font-size: 10px;
	font-weight: normal;	
}

.name, .phone, .time {
	color: #636363;
    font: 13px Tahoma;
    padding: 7px 5px 7px 3px;
    width: 388px;
}
.send {
	background: url("../images/splink2.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color:...

JavaScript

//first.js = library jQuery 


//second.js

jQuery.noConflict();
var validatorUtilities = {
    defaults: {
        test: 'none',
        invalid: function () {},
        valid: function () {}
    },
    tests: {
        init: function (data, v, p) {
            try {
                return this[data[0]](v, p, data[1]);
            } catch (e) {
				console.log('"'+data[0]+'" test\'s err')
                return this['blank'](v, p, data[1]);
            }
        },
		none: function(){return true},
        email: function (v) {
            return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+jQuery/.test(v);
        },
        blank: function (v, p) {
            return (v !== '' && v !== p);
        },
        minlength: function (v, p, m) {
            return v.length >= m;
        },
        maxlength: function (v, p, m) {
            return v.length <= m || v == p;
        },
        lengthrange: function (v, p, m) {
            r = m.split('-');
            return (v !== p) && (v.length >= r[0] && v.length <= r[1]);
        },
        digits: function (v) {
			 return !(/\D/g.test(v));
        },
        letters: function (v) {
            return !(/\d/g.test(v));
        }
    },
    placeholderAction: function (obj, e) {
        var v = obj.val();
        var p = obj.data('placeholder');
        if (p) {
            if (v == '' && (e && e.type == 'blur')) {
                obj.val(p);
                obj.addClass('placeholded');
            } else {
                if (v == p && (e && e.type == 'focus')) {
                    obj.val('');
                    obj.removeClass('placeholded')
                }
            }
        }
    },
    status: {
        check: function (obj, test, action) {
            if (test) {
                this.valid(obj, action);
            } else {
                this.invalid(obj, action);
            }
            return test;
        },
        valid: function (obj, action) {
           ...