JSFiddle - React, Tailwind, and code Playground

by Sergei Marochkin

HTML

<div id="main">
	<div class="animals">
		<div class="animal cat">first cat</div>
		<div class="animal cat">second cat</div>
		<div class="animal dog">first dog</div>
		<div class="animal dog">second dog</div>
	</div>
	<div class="birds">
		<div class="animal bird">first bird</div>
		<div class="animal bird">second bird</div>
	</div>
</div>

CSS

div { padding:15px; margin:10px; color:#fff; }
.active {background: #990000 !important; }

.animals { background:#888; }
.birds { background:#334466; }

.cat { background:#5279a4; }
.dog { background:#242424; }
.bird { background:#002424; }

JavaScript

Element.prototype.parents = function(selector) {
	var elements = [];
	var elem = this;
	var ishaveselector = selector !== undefined;
	
	while ((elem = elem.parentElement) !== null) {
		if (elem.nodeType !== Node.ELEMENT_NODE) {
			continue;
		}

		if (!ishaveselector || elem.matches(selector)) {
			elements.push(elem);
		}
	}

	return elements;
};

[].forEach.call(document.querySelectorAll('.animal'), function(element) {
	element.addEventListener('mousedown', function() {
		this.classList.add('active');
	});
});

document.addEventListener('mousedown', function(event) {
	var isAnimal = event.target.parents('.animals').length !== 0;
	var isBird = event.target.parents('.birds').length !== 0;

	if (!isAnimal && !isBird) {
		[].forEach.call(document.querySelectorAll('.active'), function(element) {
			element.classList.remove('active');
		});
	}
});