JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div id="btn-0" class="btn"></div>
<div id="btn-1" class="btn"></div>
<div id="btn-2" class="btn"></div>
</div>

CSS

body {
  background: #202020;
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  margin: 0;
  padding: 0;
  border: 0;
}

.btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  width: 200px;
  height: 100px;
  transform: skewX(-45deg);
  cursor: pointer;
}

#btn-0 {
  background: #FF0000;
  left: 50px;
}

#btn-1 {
  background: #00FF00;
  left: 250px;
}

#btn-2 {
  background: #0000FF;
  left: 450px;
}

JavaScript

const elms = document.getElementsByClassName('btn');
if (!!elms && elms.length > 0) {
  Array.from(elms).map(elm => {
  	elm.onclick = () => alert(elm.id);
  });
}