JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<body>
        <div id="message">txt</div>
        <div id="clickMe">Click me!!</div>
        <div id="mouseOver">Mouse Over!!</div>
        <div id="mouseOut">Mouse Out!!</div>
        <div id="enter">Enter!! <input type="text" name="txt" id="txt" size="5"></div>
        <div id="multipleEvent">Multiple Event Listeners to an HTML Element!!
            <ul>
                <li>Click</li>
                <li>Mouse Over</li>
                <li>Mouse Out</li>
            </ul>
        </div>
    </body>

CSS

#message{
    float:left;
    margin:0 auto;
    padding:5px;
    width:200px;
    height:30px;
    border:1px dashed #474749;
    text-align:center;
    color:#fff;
    border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      font-weight: bold;
}
#clickMe, #mouseOut, #mouseOver, #enter, #multipleEvent{
    position:absolute;
    width:50px;
    height:50px;
    text-align:center;
    padding:10px;
    color:#fff;
    cursor:pointer;
    border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
}
#clickMe{
    background-color:#42b449;
    left:10px;
    top:100px;
}
#mouseOver{
    background-color:#772953;
    left:200px;
    top:70px;
}
#mouseOut{    
    background-color:#7090c8;
    left:400px;
    top:30px;
}
#enter{    
    width:100px;
    background-color:#f7cb38;
    left:320px;
    top:150px;
}
#multipleEvent{
    width:100px;
    height:100px;
    background-color:#db4a37;
    left:550px;
    top:80px;
    font: bold 10px "lucida grande",tahoma,verdana,arial,sans-serif;
}
#multipleEvent ul {
  list-style: none;
}

#multipleEvent li {
  position: relative;
}

JavaScript

window.addEvent('domready', function(){
    var slider = new Fx.Slide('message',{
            mode:'vertical',
            duration: 500,
            transition: Fx.Transitions.Bounce.easeOut
    }).hide();
    /*Add Event */
    $('clickMe').addEvent('click', function(){
        _multipleEvent('Click', '#42b449');        
    });
    $('mouseOver').addEvent('mouseover', function(){
        _multipleEvent('MouseOver', '#772953');
    });
    $('mouseOut').addEvent('mouseout', function(){
        _multipleEvent('MouseOut', '#7090c8');
    });
    $('txt').addEvent('keydown', function(event){
        if (event.key == 'enter'){    
            _multipleEvent('Enter!!', '#f7cb38');            
        }
    });
    $('multipleEvent').addEvents({
        'click':function(){
            _multipleEvent('Click', '#42b449');
        },
        'mouseout':function(){
            _multipleEvent('MouseOut', '#7090c8');
        },
        'mouseover':function(){
            _multipleEvent('MouseOver', '#772953');
        }
    });
    _sliderClose=function(){
        slider.hide();
    }
    _multipleEvent=function(txt, background){
        $('message').setStyle('background', background);
        $('message').set('text', txt)
        slider.show();
        setTimeout("_sliderClose();", 2800);
    }
});