JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/beez5.css">
<script src="http://www.xiper.net/examples/js-plugins/effects/jqueryrotate/js/jqueryrotate.2.1.js"></script>
<div class="order_body" id="order2">
<form>
<table class="left_order">
    <tr>
        <td>Ваше имя *</td>
        <td><input type="text" name="c_name" value="" id="order_field_1" /></td>
    </tr>
    <tr>
        <td>Фамилия *</td>
        <td><input type="text" name="fio" value="" id="order_field_2" /></td>
    </tr>
    <tr>
        <td>Организация</td>
        <td><input type="text" name="org" value="" id="order_field_3" /></td>
    </tr>
    <tr>
        <td>Телефон *</td>
        <td><input type="text" name="tele" value="" id="order_field_4" /></td>
    </tr>
    <tr>
        <td>Email *</td>
        <td><input type="text" name="mail" value="" id="order_field_5" /></td>
    </tr>
     <tr>
        <td style="vertical-align: top;position: relative;top: 5px;">Комментарий</td>
        <td><textarea name="comm" class="comm_field" id=""></textarea></td>
    </tr>
</table>
    </form>
<div class="order_right">
    <p Style="margin-left:20px;">Проверка на человечность :</p>
    <div class="gear_box">
        <img id="gear1" src="http://cougardesign.ru/templates/cougarnest/images/gear.png" />
        <img id="gear2" class="gear2" src="http://cougardesign.ru/templates/cougarnest/images/gear.png" />
        <img id="gear3" src="http://cougardesign.ru/templates/cougarnest/images/gear.png" />
        <img id="cog1" src="http://cougardesign.ru/templates/cougarnest/images/cog_r.png" />
        <img id="cog2" src="http://cougardesign.ru/templates/cougarnest/images/cog_r.png" />
        <img id="cog3" src="http://cougardesign.ru/templates/cougarnest/images/cog_r.png" />
        <div class="captha_box"></div>
        <p class="captha_success">Вы успешно доказали, что не являетесь роботом!</p>
    </div>
    <p class="about_captcha">Соберите шестерни вместе</p>
   ...

CSS

.order_body {
 position:relative;   
}

.left_order input {
    border-radius: 5px;
    color: #414040;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #FFF;
    margin: 2px;
    border: 1px solid #D7D7D7;
    width: 250px; 
    margin:5px
}
.left_order,.left_order tr,.left_order td {
border:0px !important;
}
.left_order td:first {
    
}
.comm_field {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #414040;
    background-color: #FFF;
    margin: 5px;
    border: 1px solid #D7D7D7;
    max-height: 148px;
    min-height: 130px;
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    min-height: 148px;
}
/* капча */
.gear_box {
    padding:30px;
    padding-bottom:5px;
    margin:20px;
    border: 2px dashed #B4B4B4;
    width: 315px;
    height: 290px;
    position:relative;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.gear2 {
    position:absolute;
    left:135px;
    top:155px;
    z-index:1;
    -webkit-transform: rotate(-67deg);
    cursor:pointer;
}
#gear3 {
    position: relative;
    left: 62px;
}
.captha_box {
   width: 130px;
    height: 90px;
    position: absolute;
    top: 30px;
    left: 125px;
    z-index: -1; 
}
.captha_success {
    display:none;
    font-size:17px;
    text-align:center;
}
.about_captcha {
    width:390px;
    margin-left:20px;
}
.order_right {
    position: absolute;
    top: 0px;
    left: 490px;
}
.button {
    background: #08A1D8;
    background: -moz-linear-gradient(-45deg, #08A1D8 0%, #258DC8 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#08A1D8), color-stop(100%,#258DC8));
    background: -webkit-linear-gradient(-45deg, #08A1D8 0%,#258DC8 100%);
    background: -o-linear-gradient(-45deg, #08A1D8 0%,#258DC8 100%);
    background: -ms-linear-gradient(-45deg, #08A1D8 0%,#258DC8...

JavaScript

$('.captha_success').hide(1);
var angle = 0;
var angle2 = -67;
var angle3 = 0;
var gear_drop = false;
setInterval(function(){
     if (gear_drop == true) {
     angle+=2;
     angle2+=-2;
     angle3+=2;
     $("#gear1").rotate(angle);
     $("#gear2").rotate(angle2);
     $("#gear3").rotate(angle3);
    }
},50);

$("#gear2").draggable({ 
    containment:".gear_box", 
    scroll:false,
    cursorAt: { top: 62, left: 62 },
    snap: ".captha_box", 
    snapMode: "inner"
});
$( ".captha_box" ).droppable({
      drop: function( event, ui ) {
        gear_drop = true;
        $('.captha_success').show('fade',300);
        $('.gear_box').css('border', '2px dashed #B4B4B4');
        $('.about_captcha').hide('fade',300);
      },
      out: function( event, ui ) {
        gear_drop = false;
        $('.captha_success').hide('fade',300);
        $('.about_captcha').show('fade',300);
      }
});

$('#end').click(function() {
    if_valid();
});

function if_valid() {
    var field = new Array("c_name", "fio", "mail", "tele");
	var valid = true;
			$("form").find(":input").each(function() {
                for(var i=0;i<field.length;i++){
                   if($(this).attr("name")==field[i])
                   { 
                        if(!$(this).val()) {
							$(this).css('o-transition', 'background 0.5s ease-in');
							$(this).css('-ms-transition', 'background 0.5s ease-in');
						    $(this).css('transition', 'background 0.5s ease-in');
                            $(this).css('border', '1px solid #FF5151');
						    $('#notvalidmessage').show('fade');
						    $("#notvalidmessage").text("Одно из важных полей не было заполненно!");
						    $(this).effect("shake", { times: 2, direction: 'left', distance: 6 }, 300);
							valid = false;
                      }
                       else {
					      $(this).css('border', '1px solid #D7D7D7');
					  };
                       if (gear_drop == false && valid == true) {
                           valid = false;
  ...