JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Online Keyboard</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <a href="#"><div id="close">x</div></a>
    
<div id="container">
    <textarea id="write" rows="2" cols="113"></textarea>
    <ul id="keyboard">
        <li class="symbol"><span class="off">§</span><span class="shift_on">½</span></li>
        <li class="symbol"><span class="off">1</span><span class="shift_on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="shift_on">"</span><span class="alt_on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="shift_on">#</span><span class="alt_on">£</span></li>
        <li class="symbol"><span class="off">4</span><span class="shift_on">¤</span><span class="alt_on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="shift_on">%</span><span class="alt_on">€</span></li>
        <li class="symbol"><span class="off">6</span><span class="shift_on">&amp;</span></li>
        <li class="symbol"><span class="off">7</span><span class="shift_on">/</span><span class="alt_on">{</span></li>
        <li class="symbol"><span class="off">8</span><span class="shift_on">(</span><span class="alt_on">[</span></li>
        <li class="symbol"><span class="off">9</span><span class="shift_on">)</span><span class="alt_on">]</span></li>
        <li class="symbol"><span class="off">0</span><span class="shift_on">=</span><span class="alt_on">}</span></li>
        <li class="symbol"><span class="off">+</span><span class="shift_on">?</span><span class="alt_on">\</span></li>
        <li class="symbol"><span class="off">´</span><span class="shift_on">`</span></li>
        <li class="delete...

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    font: 81%/1.5 Helvetica, Arial, Sans-Serif;
    background: #333;
    -moz-user-select: none;
    user-select: none;
}

#close {
    position: absolute;
    margin: 0 6% 0 94%;
    padding: 0;
    top: 10px;
    color: #eee;
    width: 40px;
    height: 40px;
    line-height: 32px;
    font-size: 40px;
    overflow: hidden;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.4);    
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    border: 3px solid;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}    

#container {
    margin: 80px auto;
    width: 806px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#write {
    margin: 10px 0;
}

#keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 806px;
    overflow:hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
    #keyboard li {
    float: left;
    margin: 0 4px 4px 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #000;
    /* border: 1px solid; */
    background-image: -webkit-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: -moz-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: linear-gradient(to bottom,#eee 0,#ddd 100%);
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.4);    
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    }
        .capslock, .tab, .shift {
        clear: left;
        }
            #keyboard .tab, 
            #keyboard...

JavaScript

$(function() {
    var $write = $('#write'),
        shift = false,
        alt = false,
        capslock = false;

    $('#keyboard li').click(function() {
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        
        // Shift key
        if ($this.hasClass('shift')) {
            $('.letter').toggleClass('uppercase');
            $('.symbol .off').hide();
            $('.symbol .alt_on').hide();
            $('.symbol .shift_on').show();

            shift = (shift === true) ? false : true;
            capslock = false;
            return false;
        }

        // Alt key
        if ($this.hasClass('alt')) {
            $('.symbol .off').hide();
            $('.symbol .shift_on').hide();
            $('.symbol .alt_on').show();

            alt = (alt === true) ? false : true;
            shift = false;
            return false;
        }

        // Caps lock
        if ($this.hasClass('capslock')) {
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }

        // Delete
        if ($this.hasClass('delete')) {
            var html = $write.html();

            $write.html(html.substr(0, html.length - 1));
            return false;
        }

        // Special characters
        if ($this.hasClass('symbol')) {
            character = $('span:visible', $this).html();
        }
        if ($this.hasClass('space')) {
            character = ' ';
        }
        if ($this.hasClass('tab')) {
            character = "\t";
        }
        if ($this.hasClass('return')) {
            character = "\n";
        }
        if ($this.hasClass('arrow_left')) {
            character = $this.keyleft();
        }
        if ($this.hasClass('arrow_right')) {
            character = $this.keyright();
        }


        // Uppercase letter
        if ($this.hasClass('uppercase')) {
            character =...