JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway+Dots"></script>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
<br />
<button style='margin-left: 24px;'>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
<br />
<button style='margin-left:24px;'>:</button>
<button>Z</button>
<button>X</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
<button>'</button>
<br />
<button style='margin-left:48px;'>.</button>
<button>,</button>
<button class='space'>Space</button>
<button>?</button>
<button>!</button>
<br />
<br />
<h1></h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway+Dots);
::selection {
    color: white;
    background: #6699ff
}
body {
    font-family: 'Raleway Dots';
    color: #6699ff;
    text-shadow: 0 0 5px;
}
button {
    font-family: 'Raleway Dots';
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #6699ff;
    border-radius: 10px;
    color: #6699ff;
    transition: 0.1s linear;
    margin: 3px;
}
button:hover {
    border: 2px solid #5c8ae6;
    color: #5c8ae6
}
button:active{
    border: 2px solid #5c8ae6;
    background: #5c8ae6;
    color: white;
}
button:focus {
    outline: 0
}
.space {
    width: 200px;
}

JavaScript

$(document).ready(function () {
    $('button').on('click', function () {
        if( $(this).hasClass('space') ) {
            var $h = $('h1'),
                t = $h.text();
            $h.text( t + ' ' );
        }
        else
            $('h1').append(this.textContent);
    });
});