JSFiddle - React, Tailwind, and code Playground

by Damir Rysaev

HTML

<div id="root">
  <div id="children">
    <div class="coll">1</div>
    <div class="coll">2</div>
    <div class="coll">3</div>
  </div>
</div>

CSS

#root {
  padding: 20px;
  background: red;
}

#children {
  padding: 30px;
  background: yellow;
}

.coll {
  width: 30px;
  height: 30px;
  margin: 10px;
  background: green;
}

JavaScript

const divs = document.querySelectorAll('div')

Array.from(divs).forEach(function (div) {
	div.addEventListener('click', function (event) {
		event.preventDefault();
    event.stopPropagation();
  	console.log(event.target)
  })
})