JSFiddle - React, Tailwind, and code Playground

by lytrax

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" /> <input type="text" />

CSS

.jqbtk-row{text-align:center}.jqbtk-container .btn{font-size:1.5em;width:2.2em;height:2em;text-align:center;margin:2px}.jqbtk-container .jqbtk-space{width:12em}.jqbtk-container .jqbtk-shift{width:4.4em}.jqbtk-container .jqbtk-enter{width:4em}.popover{max-width:800px}.keyboard-container{overflow:hidden;position:relative}.keyboard-container .popover{left:0!important;top:0!important;width:100%;height:100%;border:0}

JavaScript

// jQuery Bootstrap Touch Keyboard plugin
// By Matthew Dawkins
(function($) {
	$.fn.keyboard = function(options) {
		// Settings
		var settings = $.extend({
			keyboardLayout: [
				[
					["1", "1"],
					["2", "2"],
					["3", "3"],
					["4", "4"],
					["5", "5"],
					["6", "6"],
					["7", "7"],
					["8", "8"],
					["9", "9"],
					["0", "0"],
					["del", "del"]
				],
				[
					["q", "Q"],
					["w", "W"],
					["e", "E"],
					["r", "R"],
					["t", "T"],
					["y", "Y"],
					["u", "U"],
					["i", "I"],
					["o", "O"],
					["p", "P"],
					["-", "="],
					["_", "+"]
				],
				[
					["a", "A"],
					["s", "S"],
					["d", "D"],
					["f", "F"],
					["g", "G"],
					["h", "H"],
					["j", "J"],
					["k", "K"],
					["l", "L"],
					["'", ":"],
					["@", ";"],
					["#", "~"]
				],
				[
					["z", "Z"],
					["x", "X"],
					["c", "C"],
					["v", "V"],
					["b", "B"],
					["n", "N"],
					["m", "M"],
					[",", ","],
					[".", "."],
					["?", "!"]
				],
				[
					["shift", "shift"],
					["space", "space"],
					["shift", "shift"]
				]
			],
			numpadLayout: [
				[
					["7"],
					["8"],
					["9"]
				],
				[
					["4"],
					["5"],
					["6"]
				],
				[
					["1"],
					["2"],
					["3"]
				],
				[
					["del"],
					["0"],
					["."]
				]
			],
			telLayout: [
				[
					["1"],
					["2"],
					["3"]
				],
				[
					["4"],
					["5"],
					["6"]
				],
				[
					["7"],
					["8"],
					["9"]
				],
				[
					["del"],
					["0"],
					["."]
				]
			],
			wideNumpadLayout: [
				[
					["0"],
					["1"],
					["2"],
					["3"],
					["4"],
					["5"],
					["6"],
					["7"],
					["8"],
					["9"],
					["del"],
					["."]
				]
			],
			layout: false,
			type: false,
			btnTpl: '<button type="button" tabindex="-1">',
			btnClasses: 'btn btn-default',
			btnActiveClasses: 'active btn-primary',
			initCaps: false,
			placement: 'bottom',
			container:'body',
			trigger: 'manual'
		}, options);

		if (!settings.layout)...