JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<script src="http://ryanflorence.com/forge/Element.GetUntil.js"></script>
<p id="foo">
    I am foo. <br/>click, <br/>mouseover,<br/>mouseout,<br/>but please <br/>don't be a playah.
</p>
<p id="log">Waiting ...</p>

CSS

p#foo {
    background: #f0f0f0;
    border: solid 1px #ccc;
    font-size: 24px;
    padding: 10px;
    color: #585858;
}

p#log {
    margin-top: 20px;
    text-align: center;
}

body {
    font-family: helvetica, arial;
}

JavaScript

var log = $('log');

$('foo').addEvents({  
    click: function() {  
        log.set('html','click');
    },  
    mouseenter: function() {  
        log.set('html','mouseover');  
    },  
    mouseleave: function() {  
        log.set('html','mouseout');
    }  
});