JSFiddle - React, Tailwind, and code Playground

by jonathanmh

HTML

<div class="lol"></div>
<div class="lol"></div>
<div class="lol"></div>

<!--<div class="myOtherlEment"></div>
<div class="myOtherlEment"></div>
<div class="myOtherlEment"></div>-->

<div class="myOtherElement">
    <span><strong>Menu</strong></span>
    <div>
        <a href="#">Menuelement 1</a>
        <a href="#">Menuelement 2</a>
        <a href="#">Menuelement 3</a>
    </div>
</div>
<div class="myOtherElement">
    <span><strong>Menu</strong></span>
    <div>
        <a href="#">Menuelement 1</a>
        <a href="#">Menuelement 2</a>
        <a href="#">Menuelement 3</a>
    </div>
</div>

CSS

div.lol {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}

div.myOtherElement {
    width: 200px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    border: 1px solid black;
    background-color: #f9f9f9;
}

div.myOtherElement span, div#myOtherElement a {
    display: block;
    padding: 0 3px;
}

div.myOtherElement a:hover {
    background: #f5f5f5;
}

JavaScript

window.addEvent('domready', function(){

    //First Example
        color = $$('.lol').getStyle('backgroundColor');

    // We are setting the opacity of the element to 0.5 and adding two events
    $$('.lol').set('opacity', 0.5).addEvents({
        mouseenter: function(){
            // This morphes the opacity and backgroundColor
            this.morph({
                'opacity': 0.6,
                'background-color': '#E79D35'
            });
        },
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                opacity: 0.5,
                backgroundColor: color
            });
        }
    });

    // Second Example

    // The same as before: adding events
    $$('.myOtherElement').addEvents({
        mouseenter: function(){
            // Always sets the duration of the tween to 1000 ms and a bouncing transition
            // And then tweens the height of the element
            this.set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
            }).tween('height', '150px');
        },
        mouseleave: function(){
            // Resets the tween and changes the element back to its original size
            this.set('tween', {}).tween('height', '20px');
        }
    });

});