JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://rawgit.com/ractivejs/ractive-events-tap/master/dist/ractive-events-tap.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <h2>Try tapping both targets on a touchscreen to see the difference</h2>
    <div class='target left' on-tap='add("tapcounter",1)'>
        <p>Tapped {{tapcounter}} {{ tapcounter === 1 ? 'time' : 'times' }}</p>
    </div>
    
    <div class='target right' on-click='add("clickcounter",1)'>
        <p>Clicked {{clickcounter}} {{ clickcounter === 1 ? 'time' : 'times' }}</p>
    </div>
    
    <h2>While a button is focused, hit the spacebar (tab/shift+tab to cycle)</h2>
    {{# buttoncounters:i }}
    <button on-tap='add("buttoncounters["+i+"]")'>Tap me ({{this}})</button>
    {{/ buttoncounters }}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
    height: 100%;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

.target {
    position: relative;
    width: 49%;
    height: 100px;
    float: left;
    background-color: #eee;
    cursor: pointer;
    margin: 0 0 2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.target.left {
    margin-right: 1%;
}

.target.right {
    margin-left: 1%;
}

.target p {
    position: absolute;
    bottom: 1em;
    left: 1em;
    margin: 0;
}

button {
    display: block;
    background-color: #eee;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.2em;
    float: left;
    width: 32%;
    margin: 0 2% 0 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button:focus {
    background-color: rgb(180,180,240);
}

button:last-child {
    margin: 0;
}

/* clearfix */
main:before,
main:after {
    content: " ";
    display: table;
}

main:after {
    clear: both;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        tapcounter: 0,
        clickcounter: 0,
        buttoncounters: [ 0, 0, 0 ]
    }
});