JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<script src="http://abcdesign.rs/gw-eshop/var/cache/misc/statics/js/tygh/scripts-2a279660433e23e21103519b3fda040c1401788601.js?ver=4.1.5"></script>
<header>
	
</header>
<div id="block_top"></div>
<div id="wraper">
	<form method="post" action="admin" id="frmAdmin">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
</div>
<section id="leftPageList">
<div class="scrollable" id="ControlSelectDiv">
<select size="45" name="lbPages" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;lbPages\&#39;,\&#39;\&#39;)&#39;, 0)" id="lbPages" class="scrollableinside">
	<option selected="selected" value="1">Index</option>
	<option value="2">Hotel</option>
	<option value="12">Events</option>
	<option value="13">Lounge</option>
	<option value="14">What To See</option>
	<option value="15">Rooms</option>
	<option value="16">Accomodation</option>
	<option value="17">Restaurant</option>
	<option value="18">Menu</option>
	<option value="19">Wine</option>
	<option value="20">Afternoon Tea</option>
	<option value="21">Meet The Chef</option>
	<option value="22">Catering &amp; Delivery</option>
	<option value="23">Spa</option>
	<option value="24">Treatments</option>
	<option value="25">Premier Spa Suite</option>
	<option value="26">Hair Salon</option>
	<option value="27">Gift Cards</option>
	<option value="28">The shop</option>
	<option value="29">Fitness</option>
	<option value="30">Personal Training</option>
	<option value="31">Fitness Classes</option>
	<option value="32">Membership</option>
	<option value="33">Weddings</option>
	<option value="34">Open Days And Wedding Fairs</option>
	<option value="35">For Brides to be </option>
	<option value="36">Corporate &amp; Banqueting</option>
	<option value="37">Banqueting</option>
	<option value="38">Conference </option>
	<option value="40">Team...

CSS

@charset "UTF-8";

html{

}

body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 17px;
  overflow: hidden;
  background: #ddd;
  box-sizing: border-box;
}

 input[type="submit"]{
  padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #08c;
}

input[type="submit"]:hover{
  background: #0044cc;
}

input[type="text"]{
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  padding: 8px;
  color: #000;
}

/*===============Header================*/

header{
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: #00a0d0;
  border: 1px solid #0079a4;
  /*z-index: 999;*/
}

#block_top{
  position: relative;
  height: 55px;
}

/*==============End Header==============*/

/*===============Content================*/

#wraper{
  display: block;
  position: relative;
  height: calc(100% - 120px) !important;
}

.ui-menu-item{
  display: none;
}

.ui-helper-hidden-accessible{
  display: none;
}

.ControlSelectDiv {
  display: inline-block !important;
}

section {
  display: inline-block;
  position: relative;
  float: left;
  height: 100%;
  vertical-align: top;
}

/*#lbPages{
  left: -10px;
  height: 100%;
  overflow: hidden;
}*/

section#leftPageList{
  width: 200px;
  margin-right: 10px;
}

section#centerControlList{
  overflow: hidden;
  width: 0;
  height: auto;
  max-height: 500px;
  /*margin-right: 100px;*/
  -webkit-transition: width .6s ease;
  -moz-transition: width .6s ease;
  -o-transition: width .6s ease;
}

section#centerControlList.active{
  width: 300px;
}

section#rightCrudControl{
  height: auto;
  width: auto;
}

.scrollable{
  position: relative;
    display:inline-block;
    vertical-align:top;
    overflow-y: scroll;
    overflow-x: hidden;
    border-right:solid lightgrey 1px;
    height: 500px;
    left:...

JavaScript

$(function(){
    //autoCmpplete();
    //searchShort();
    autoDate();
    optionToggle();
});

function autoDate(){
    var d = new Date();
    document.getElementById('footer_date').innerHTML = 'Copyright © ' + d.getFullYear() + ' Some Title';
}

function optionToggle(){
    $('#leftPageList').on('click', 'option', function(e){
        e.preventDefault();
        $('#centerControlList').toggleClass('active');
    });
}

function autoCmpplete(){
    var validOptions = ["Index", "Hotel", "Events", "Lounge", "What To See", "Rooms", "Accomodation",
                        "Restaurant", "Menu", "Wine", "Afternoon Tea", "Meet The Chef", "Catering &amp; Delivery",
                        "Spa", "Treatments", "Premier Spa Suite", "Hair Salon", "Gift Cards", "The shop",
                        "Fitness", "Personal Training", "Fitness Classes", "Membership", "Weddings",
                        "Open Days And Wedding Fairs", "For Brides to be", "Corporate &amp; Banqueting",
                        "Banqueting", "Conference", "Team building", "Wellness", "Offers", "Gallery", "Contact us",
                        "Terrace", "Day spa packages", "Packages", "Careers", "Press room", "Site Map"];

     previousValue = "";

     $('#SearchBox').autocomplete({
        autoFocus: true,
        source: validOptions
    }).keyup(function() {
        var isValid = false;
        for (i in validOptions) {
            if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
                isValid = true;
            }
        }
        if (!isValid) {
            this.value = previousValue
        } else {
            previousValue = this.value;
        }
    });
}

function searchShort(){
    var $options = $('#lbPages option');
    document.getElementById("SearchBox").onkeyup = function () {
        var $HiddenOptions = $('#CustomerSelectHidden option');
        $HiddenOptions.each(function (index, value) {
           ...