JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <div on-mousemove='redraw(event)'>
        <svg>
            <circle class='eye' cx='50' cy='50' r='48'/>
            <circle class='pupil' cx='{{50+(x-50)/10}}' cy='{{50+(y-50)/10}}' r='10'/>
            
            <circle class='eye' cx='150' cy='50' r='48'/>
            <circle class='pupil' cx='{{150+(x-150)/10}}' cy='{{50+(y-50)/10}}' r='10'/>
        </svg>
    </div>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

body, html, main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

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

.error {
    color: #d00;
    font-family: monospace;
}

div {
    width: 100%;
    height: 100%;
}

svg {
    width: 200px;
    height: 100px;
}

.eye {
    fill: white;
    stroke: black;
}

.pupil {
    fill: black;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        x: 100,
        y: 50
    },
    redraw: function ( event ) {
        this.set({
            x: event.original.clientX,
            y: event.original.clientY
        });
    }
});