JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Drug test</title>
  </head>
  <body>

	<div id="div_1"></div>
	<div id="div_2"></div>
		
  </body>
</html>

CSS

#div_1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 120px; 
	left: 80px;
	background-color: #2EFE64;
  -webkit-user-select: none;
}

#div_2 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 120px; 
	left: 300px;
	background-color: #2E9AFE;
  -webkit-user-select: none;
}

JavaScript

console.log("Hi all");

var div_1 = document.getElementById("div_1");
var div_2 = document.getElementById("div_2");

div_1.addEventListener("mousedown", showSmth);
div_1.addEventListener("mouseup", unShowSmth);

div_2.addEventListener("mousedown", showSmth);
div_2.addEventListener("mouseup", unShowSmth);

document.documentElement.addEventListener("mouseup", unShowSmth);

function showSmth(e) {
	console.log(e.target.id + " is showing something great");
}

function unShowSmth(e) {
	console.log(e.target.id + " stops showing something great");
}