JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>jQuery On-Screen Keyboard Demo | jQuery4u</title>
        <meta name="description" content="">
        <meta name="keywords" content="jQuery OnScreen Keyboard">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/jsKeyboard.css" type="text/css" media="screen"/>

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
		  
		  
		   <script src="js/vendor/jquery-1.9.1.min.js"></script>

        <script type="text/javascript" src="js/jsKeyboard.js"></script>
        <script src="js/main.js"></script>
		  
    </head>
    <body>

        <div id="main" class="container">

            <hr>

            <input class="input" name="username" type="text" placeholder="Username...">
            <input class="input" name="password" type="password" placeholder="Password...">
            <textarea rows="3" cols="20" placeholder="Description..." name="description" /></textarea>

            <div id="virtualKeyboard"></div>
        </div> <!-- /container -->
    </body>
</html>

CSS

body {margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
     /* text-align:center; /* Hack for IE5/Win */
font-size:14px; font-family:Arial Unicode MS;font-weight:normal;
overflow:hidden;
}

#virtualKeyboard {
	position:fixed;
	top:540px;
	height:308px;
   width: 1280px;;
   text-align: center;
	#background-color:#7b8490;
}

#keyboard{
    padding:10px;
    width:810px;
    margin: 0 auto;
    height:288px;
    display:block;
    padding-left: 22px;
    display:block;
    position:absolute;
    bottom:0px; 
	 
    left: 62px;
	 #top:800px;
	
     -webkit-transition: all 300ms;
    #background-color:#7b8490;
	 
	 
     box-shadow:  0 0 10px #111;
	 background-color:rgba(128,128,128,0.8);
 }
 
.keyb{
	opacity:0;
	
}

.show_keyboard
{
	top:500px;
	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:50px; height:50px;
    background-color:#fff;
    position:relative;
    float:left;
    margin-right: 8px;
    margin-top: 10px;
    cursor:pointer;
    font-size:1.9em;

    /*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; */
    /*gradient*/
    background: #ffffff; /* old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
	...

JavaScript

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, keyboard) {
        jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
        jsKeyboard.keyboardLayout = elem;

        if (keyboard != null && keyboard != undefined)
            jsKeyboard.generateKeyboard(keyboard);
        else
            jsKeyboard.generateKeyboard("default");

        jsKeyboard.addKeyDownEvent();

        jsKeyboard.show();
        $(':input').not('[type="reset"]').not('[type="submit"]').on('focus, click', function (e) {
            jsKeyboard.currentElement = $(this);
            jsKeyboard.currentElementCursorPosition = $(this).getCursorPosition();
            console.log('keyboard is now focused on ' + jsKeyboard.currentElement.attr('name') + ' at pos(' + jsKeyboard.currentElementCursorPosition + ')');
        });
    },
    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,
    generateKeyboard: function (keyboard) {
        var bClass = "";
        var kClass = "";
        var onclick = "";
        var text = "";

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

        /*small...