JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "div1">
	<p id = "text">
		Try to highlight this texT
	</p>
    <br>
</div>
<p id = "downForDiv"></p>
<p id = "downForP"></p>

<p id = "upForDiv"></p>
<p id = "upForP"></p>

<p id = "clickForDiv"></p>
<p id = "clickForP"></p>
    
<button id = "clear">clear</button>

CSS

div {
	background-color: #00ff00;
}
#text {
    background-color: #ffff00;
}

JavaScript

$("#div1").mouseup(function(event){
    $("#upForDiv").html("mouse up on div");
});

$("#text").mouseup(function(event) {
	$("#upForP").html("mouse up on tag P");
});

$("#div1").mousedown(function(event){
    $("#downForDiv").html("mouse down on div");
});

$("#text").mousedown(function(event) {
	$("#downForP").html("mouse down on tag P");
});

$("#div1").click(function(event){
    $("#clickForDiv").html("click on div");
});

$("#text").click(function(event) {
	$("#clickForP").html("click on tag P");
});
$("#clear").click(function(){
    $("#upForDiv").html("");
    $("#upForP").html("");
    $("#clickForDiv").html("");
    $("#clickForP").html("");
    $("#downForDiv").html("");
    $("#downForP").html("");
});