JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="vodsearch">
        <div class="loginpassmain">
            <div class="loginpass">Поиск фильма</div>
            <input type="text" id="moviesearch" />
        </div>
    </div>
</div>

CSS

#vodsearch {
    position:absolute;
    z-index:15000;
    top:0px;
    left:0px;
    width: 960px;
    height: 540px;
}
.loginpassmain {
    text-align:center;
    position:absolute;
    top:120px;
    left:240px;
    width:400px;
    height:220px;
    #background-color:green;
}
#main {
    position: fixed;
    z-index:2;
    left: 0px;
    top: 0px;
    width: 960px;
    height: 540px;
    overflow:hidden;
    background:#AAA;
}
#virtualKeyboard {
    position:fixed;
    top:0px;
    height:540px;
    width: 960px;
    ;
    text-align: center;
    #background-color:#7b8490;
}
#keyboard {
    padding:10px;
    width:700px;
    margin: 0 auto;
    height:228px;
    display:block;
    padding-left: 22px;
    position:absolute;
    top:540px;
    left: 100px;
    #top:800px;
    -webkit-transition: all 500ms;
    #background-color:#7b8490;
    box-shadow: 0 0 10px #111;
    background-color:rgba(128, 128, 128, 0.8);
}
.keyb {
    opacity:1;
}
.show_keyboard {
    opacity:1;
}
#keyboard:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#keyboardHeader {
    position:relative;
}
#keyboardHeader div {
    color:#fff;
    background-color:#7b8490;
    padding:3px;
    padding-left:15px;
    padding-right:15px;
    position:absolute;
    cursor:pointer;
    right:-10px;
    top:-40px;
}
.closex {
    font-weight:bolder;
    color:#000;
}
#keyboardCapitalLetter {
    display:none;
}
#keyboardSmallLetter {
    display:block;
}
#keyboardNumber {
    display:none;
}
#keyboardSymbols {
    display:none;
}
.button {
    width:45px;
    height:45px;
    background-color:#fff;
    position:relative;
    float:left;
    margin-right: 8px;
    margin-top: 5px;
    cursor:pointer;
    font-size:2em;
    /*box shadow*/
    -webkit-box-shadow: 0px 1px 5px #000000;
    -moz-box-shadow: 0px 1px 3px #000000;
    box-shadow: 0px 1px 5px #000000;
    /*box radius*/
    -moz-border-radius: 5px;
    /* border-radius: 5px; */
   ...

JavaScript

var Search = {};



var jsKeyboard = {
    settings: {
        buttonClass: "button", // default button class
        onclick: "jsKeyboard.write();", // default onclick event for button
        keyClass: "key", // default key class used to define style of text of the button
        text: {
            close: "close"
        }
    },
        "keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily.
    init: function (elem, $element) {


        jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
        jsKeyboard.keyboardLayout = elem;

        jsKeyboard.generateKeyboard("default");

        jsKeyboard.currentElement = $element;
        jsKeyboard.addKeyDownEvent($element);
        $element.focus();
        jsKeyboard.show();

    },
    focus: function (t) {
        jsKeyboard.currentElement = $(t);
        jsKeyboard.show();
    },
    keyboardLayout: "", // it shows the html element where keyboard is generated
    currentKeyboard: "default", // it shows the which keyboard is used. If it's not set default keyboard is used.
    currentElement: null,
    currentElementCursorPosition: 0,
    generateKeyboard: function (keyboard) {
        var bClass = "";
        var kClass = "";
        var onclick = "";
        var text = "";
        var row = "";
        var pos = "";

        var s = "";
        s += "<div id=\"keyboard\">";
        s += "<div id=\"keyboardHeader\">";
        // s += "<div onclick=\"jsKeyboard.hide();\"><span>" + jsKeyboard.settings.text.close + "</span><span class=\"closex\"> X</span></div>"
        s += "</div>";

        /*small letter */
        s += "<div id=\"keyboardSmallLetter\">";
        $.each(jsKeyboard.keyboard[keyboard].smallLetter, function (i, key) {
            generate(key);
        });
        s += "</div>";

        function generate(key) {
            bClass = key.buttonClass == undefined ? jsKeyboard.settings.buttonClass : key.buttonClass;
            kClass...