JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<p class="hidden">Jquery</p>
<p>JqueryUI</p>
<button id="run">Run</button>
<div >Mouse Event</div>
<div id="mover">Mouse Event</div>
<div >Mouse Event</div>

<ul id="list">
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
</ul>

<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
<b></b>

CSS

ul > li {
    list-style-type: none;
}

.hidden {
    display:none;
    color: red;
}

.test{
    color: green;
}

.lookAtMe {
    color: blue
}
div{
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
    padding: 3px;
}

div.colored {
    background: red;
}

a {
    display: inline-block;
}

JavaScript

$(document).ready(function () {
    
    //events
    $("p").on("click", { foo: "bar" }, function (event) {
        //console.log("Evento click: " + event.data.foo + "(should bar)");
        //console.log("<p> is clicked");
    });
    
    $("div").on("mouseenter mouseleave", function() {
        //console.log("Mouseover");
    });
    
    $("div").on({ 
        mouseenter: function() {
            //console.log("Over");
        },
        mouseleave: function() {
            //console.log("Fuera");
        },
        click: function(event) {
            //console.log("click on div: ");
            //console.dir(event);
        }
    });
    
    $("ul").on("click", "li", function() {
        console.log($(this).text() + " clickeado -- Delegate  method");
    });
    
    $("p:nth-child(2)").one("click", function() {
        console.log("Clickeado una vez");
        $(this).click(function() {
            console.log("Este elemento ya fue clickeado");
        });
    });
    
    var foo = function() {
        console.log("foo");
    }
    
    var bar = function() {
        console.log("bar");
    }
    
    $("p").on("click", foo).on("click", bar);
    $("p").off("click", bar);

    //efects
    //$("p").hide();
    $("p.hidden").fadeIn(750, function() {
        $(this).addClass("lookAtMe");
    });
    
    var existe = $(".hidden");
    var cb = function() {
        console.log("done!")
    }
    
    if( existe.length ){
        existe.fadeIn(300, cb);
        //existe.css("color", "green");
    }else{
        cb();
    }
    
    //var todos = $("#list").find("*").css("border", "3px solid red").length;
    //$("body").prepend("<h3>" + todos + " Encontrados");
    
    $( "#run" ).click(function() {
      $( "div:animated" ).toggleClass( "colored" );
    });
    
    function animateIt() {
      //$( "#mover" ).slideToggle( "slow", animateIt );
        //setTimeOut(5000, animateIt());
    }
    //animateIt();
    
    $( "a[hreflang|='en']" ).css( "border",...