JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://flir.su/callme/callme.css" type="text/css">
<script type="text/javascript" src="http://flir.su/callme/jquery.min.js"></script>
<script type="text/javascript" src="http://flir.su/callme/jquery.storage.js"></script>
<!--<script type="text/javascript" src="http://flir.su/callme/callme.js"></script>-->

<div id="callme"><input id="viewform" type="button"></div>
<div id="callmeform" class="hide-off"><div id="cme_cls"></div><h6><font color="#03539C">Заказать обратный звонок</font></h6>
<table cellpadding="0" cellspacing="0">
<tbody><tr><td>Ваше имя</td></tr>
<tr><td><input class="txt" maxlength="150" id="cname" value="" type="text"></td></tr>
<tr><td>Телефон</td></tr>
<tr><td><input class="txt" maxlength="150" value="+7-" id="cphone" type="text"></td></tr>
<tr><td>Вопрос или комментарий</td></tr>
<tr><td><input class="txt" maxlength="1000" id="ccmnt" type="text"></td></tr>
<tr><td>

<input class="btn" value="Перезвоните мне" type="button"></td>
</tr>
</tbody></table>
<div id="callme_result"></div>
</div>


<span id="abc">Click me</span>

CSS

/*#callme {
height: 151px;
position: fixed;
*position: absolute;
top: 150px; 
right: 0;
width: 22px;
z-index: 6;
}

#callmeform .txt {
width: 290px;
border: 1px solid #aaa;
color: #777;
font-size: 14px;
padding: 2px 2px;
}

#callmeform {
display: none;
text-shadow: 0 1px #fff;
border-bottom: 1px solid #0f8f0c;
border-top: 1px solid #0f8f0c;
box-shadow: 0 3px 10px #ccc;
padding-left: 10px;
position: fixed;
*position: absolute;  
border-radius: 10px;
right: 50px;
top: 150px;
width: 305px;
z-index: 5;
background: #efefef;
}

#callmeform table {
border-collapse: collapse;
width: 305px;
}

#callmeform table td {font-size: 12px; padding: 2px 1px;}

#callmeform .btn {
text-shadow: 0 1px #efefef;
font-weight: bold;
margin-top: 3px;
padding: 5px 9px;
}

#callmeform h6 {
color: #0f8f0c;
font-size: 13px;
padding: 10px 0 8px 0;
margin: 0;
}

.hide-on {display: none;}

.hide-off {display: block;}

.callmebody {
font-family: Arial;
font-size: 80%;
background: #fff;
padding: 5px 10px;
}

.callmebody .inf {
padding: 0 5px;
margin: 0 0 10px 0;
font-weight: bold;
clear: both;
}

#viewform {
border: 0;
padding: 0;
background: url(/callme/callme.png) 0px 0;
height: 185px;
width: 22px;
cursor: pointer;
}

.callmeform_hover {
    background-position: 22px 0!important;
}

#callme_result {
    background: #fff url(loading.gif) 10px center no-repeat;
    display: block;
    clear: both;
    margin: 5px 11px 10px 0px;
}

#callme_result div {
    padding: 7px 7px;
    margin: 4px 0px 0px 0px;
}

#callme_result .sending {
    padding: 4px 0 4px 35px;
    display: block;
    clear: both;
}

#callme_result .c_success {
    background: #c8ed9c;
}

#callme_result .c_error {
    background: #ffadad;
    color: #333;
    text-shadow: none;
}

#cme_cls {
    height: 16px;
    width: 16px;
    float: right;
    display: inline;    
    background: url(close.png);
    margin: 12px 14px 0 0;
    box-shadow: 0 1px 0px #fff;
    cursor: pointer;
}

#cm_crds a {
    font-size: 10px;
    color:...

JavaScript

/*jQuery(function(){
jQuery("#viewform").click(function(){
    jQuery("#callmeform").fadeToggle("fast");
});

jQuery("#cme_cls").click(function(){
    jQuery("#viewform").click();
});

jQuery("#viewform").hover(
    function () { 
        jQuery(this).addClass("callmeform_hover");
    },
    function () {
        jQuery(this).removeClass("callmeform_hover");
    }
);
});

function sendMail() {
    var cnt = jQuery.Storage.get('callme-sent'); // getting last sent time from storage
    if (!cnt) { cnt = 0; }
    
    jQuery.getJSON("/callme/index.php", {
        cname: jQuery("#cname").val(), cphone: jQuery("#cphone").val(), ccmnt: jQuery("#ccmnt").val(), ctime: cnt, url: location.href }, function(data) {    
        message = "<div class='" + data.cls + "'>" + data.message +"</div>";
        jQuery("#callme_result").html(message);
        
        if (data.result == "success") {
            jQuery.Storage.set("callme-sent", data.time);
            jQuery("#callmeform .btn").attr("disabled", "disabled");
            setTimeout( function(){ jQuery("#viewform").click(); }, 10000);
            setTimeout( function(){ jQuery("#callmeform .txt").val(""); }, 10000);
        }
    });
//    }
}

jQuery(document).ready(function(){

jQuery("#callmeform .txt").focus(function(){
    //jQuery(this).val("");
});

jQuery("#callmeform .btn").click(function(){
    jQuery("#callme_result").html("<div class='sending'>Отправка...</div>");
    setTimeout( function(){ sendMail(); }, 2000);
    //setTimeout( function(){ jQuery(this).attr('disabled', ''); }, 5000);
    return false;
});    
});*/


jQuery(function(){
jQuery("#abc").click(function(){
    jQuery("#callmeform").fadeToggle("fast");
});

jQuery("#cme_cls").click(function(){
    jQuery("#abc").click();
});

/*jQuery("#viewform").hover(
    function () {
        jQuery(this).addClass("callmeform_hover");
    },
    function () {
        jQuery(this).removeClass("callmeform_hover");
    }
);
});*/

function sendMail() {
    var...