JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="black"></div>
  <div class="red"></div>
  <div class="green"></div>
</div>
<div class="main2">
  <div class="black black2"></div>
  <div class="red red2"></div>
  <div class="green green2"></div>
</div>

CSS

.main{
  width:500px;
  height:250px;
  border:2px solid gray;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;}
.black{
  width:100px;
  height:50px;
  border:2px solid #000;}
.red{
  width:100px;
  height:50px;
  border:2px solid red;}
.green{
  width:100px;
  height:50px;
  border:2px solid green;}

JavaScript

window.onload=function()
{
	var black=document.querySelector('.black');
  var black2=document.querySelector('.black2');
  black.addEventListener('click',function()
  {
  	black2.innerHTML=1*black2.innerHTML+1;
  })
	var red=document.querySelector('.red');
  var red2=document.querySelector('.red2');
  red.addEventListener('click',function()
  {
  	red2.innerHTML=1*red2.innerHTML+1;
  })
	var green=document.querySelector('.green');
  var green2=document.querySelector('.green2');
  green.addEventListener('click',function()
  {
  	green2.innerHTML=1*green2.innerHTML+1;
  }
)}