JSFiddle - React, Tailwind, and code Playground

HTML

<p id="a" class="class1">a</p>
<p id="b" class="class2">b</p>
<p id="c" class="class1">
    <p class="class3" attr="val">d</p>
</p>
<p><button>click me</button></p>

JavaScript

// $("p.class1").css({color:"blue"});
// $("p[attr='val']").css({color:"blue"});
//$("button").on("click", function(){alert("you did it!")});
//$("p").on("click", "button", function(){alert("again!")})
//$("p:last").append("<button>click me more</button>");
// $("p:last").load("result");
// $.get("result", function(data) {alert(data.error )});

// promises
//var defo = $.Deferred(); 
//defo.done (function(data){alert("done1:" + data)}).done(function(data){alert("done2:" + data)}) 
//$("body").on("click", function(){defo.resolve("val")})

// plugin
// $("p#a").hilight();
// var s = document.getElementById('a').style; 
// s.opacity = 1; 
// function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();
$("p#a").load("/echo/html/",{html:'that\'s an echo!'}, function(){alert('done')}); // POST method used!