JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/style_new.css">
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/position.css">
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/layout.css">
<div id="contact_box">
    <div id="navigate_box">
        <ul>
            <li class="cnli1">
                Контакты
            </li>
            <li class="cnli2">
                Связь с нами
            </li>
        </ul>
    </div>
    <div id="clear_column"></div>
    <div id="contact_content1" class="c_contain">
        <h1>Контакты</h1>
        <table class="contact_table">
            <tr>
                <td><img src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/user-32.png" alt="Контактное лицо" class="tab_img" /><p>Контактное лицо</p></td>
                <td><p>Михаил</p></td>
            </tr>
            <tr>
                <td><img src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/phone-32.png" alt="Телефон" class="tab_img" /><p>Телефон</p></td>
                <td><p>+ 7 904 3383 150</p></td>
            </tr>
            <tr>
                <td><img src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/mail-32.png" alt="Email" class="tab_img" /><p>Email</p></td>
                <td><p>[email protected]</p></td>
            </tr>
            <tr>
                <td><img src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/settings-32.png" alt="Время работы" class="tab_img" /><p>Время работы</p></td>
                <td><p>С 10.00 - 20.00 </p></td>
            </tr>
        </table>
    </div>
    <div id="contact_content2" class="c_contain" style="display: none;">
        <h1>Связь с нами</h1>
        <div class="clear_box"></div>
        <p>Ваше имя</p>
        <input type="text" name="name" id="input_name" value=""/>
        <p>Email</p>
        <input...

CSS

body {
    padding:50px;
    background:#fff !important;
}
.c_contain {
    width:575px;
    height:570px;
    text-align:left;
    font-size:18px;
    padding-left: 25px;
    margin-bottom:100px;
}
.c_contain input:active, .c_contain input:focus {
    border: 1px solid #D7D7D7;    
}
.c_contain input {
    border-radius: 5px;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #FFF;
    border: 1px solid #D7D7D7;
    width: 250px;
    margin: 5px;
    outline: none;
}
.c_contain textarea {
    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;
    width: 520px;
    min-height: 150px;
    margin-bottom: 15px;
    margin-right: 15px;
    padding: 10px;
    resize: none;
    outline: none;
}
.c_contain table, .c_contain td, .c_contain tr {
border: 0px !important;
}
.c_contain td {
    padding: 10px 10px 20px 60px;
    position:relative;
}
.c_contain p {
    font-family: 'Open Sans';
    padding: 5px 0;
}
.c_contain h1 {
    font-family: 'Open Sans';
    text-align: left;
    font-size: 30px;
    letter-spacing: -1px;
    color: #08a1d8;
    position: relative;
    top: 15px;
}
#navigate_box, #clear_column, .c_contain {
    display:inline-block;
    background: #EDEDED;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
#navigate_box {
    width:175px;
    padding:25px;
    vertical-align:top;
}
#clear_column {
    width:25px;
}
#navigate_box li {
    text-align: left;
    list-style: none;
    font-family: 'Open Sans';
    font-size: 17px;
    text-transform: uppercase;
    cursor: pointer;
   ...

JavaScript

$('.cnli2').click(function () {
    if ($('#contact_content2').is(":hidden") == true) {
        $('#contact_content1').hide('fade',500);   
        setTimeout(function() {
            $('#contact_content2').show('fade',300);     
        },500)
    }
});
$('.cnli1').click(function () {
    if ($('#contact_content1').is(":hidden") == true) {
        $('.c_contain').hide('fade',800);   
        setTimeout(function() {
            $('#contact_content1').show('fade',800);     
        },800)
    }
});
$('.tab_img').mousedown(function(){ return false; });

$('#end').click(function() {
    if (if_valid() == true) {
	$.ajax({
	  url: "/modules/mod_housebuilder/php/postmaster.php",
	  type: "POST",
	  data: {
      f_name: $('#input_name').val(),
      f_telephone: $('#input_telephone').val(),
      f_email: $('#input_email').val(),
      f_text: $('#input_text').val()
      },
      success: function(response) {
		$('#contact_content2').html('');
        setTimeout(function() {
        $('#contact_content2').append('<p class="success_message">Ваше сообщение было успешно отправленно!</p>');
        },600);
	  },
	  error: function(response) {
	 }
	});
	}
});

function if_valid() {
    var field = new Array("name", "email", "telephone", "message");
	var valid = true;
			$("#contact_content2").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');
						    $(this).effect("shake", { times: 2, direction: 'left', distance: 6 }, 300);
							valid = false;
                      }              
                  }
                }
       });
	   if (valid == false) {
	   ...