JSFiddle - React, Tailwind, and code Playground

by grippstick

HTML

<div class='dashboard'>
  <div class='component'>
    Hello World 1
  </div>
  <div class='component'>
    Hello World 2
  </div>
  <div class='component'>
    Hello World 3
  </div>
  <div class='component'>
    Hello World 4
  </div>
  <div class='component'>
    Hello World 5
  </div>
</div>

CSS

.dashboard {
  display: flex;
  border: red 1px solid;
}

.component {
  border: blue 1px solid;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

var components = document.querySelectorAll(".component");

var click = function(e){
  var comp = e.target;
  
};

components.forEach(function(comp){
	comp.onclick=click;
});