JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div id="main">
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
  <div class="elemnt"></div>
</div>

CSS

#main {
  background-color: #bbb;
  width: 90%;
  height: 30rem;
  overflow: auto;
  margin: 1rem auto;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.elemnt {
  width: 8rem;
  height: 8rem;
  margin: 0.5rem;
  background-color: #f88;
}
.elemnt:nth-child(2n) {
  background-color: #88f;
}
.elemnt:nth-child(3n) {
  background-color: #8f8;
}

JavaScript

document.getElementById("main").addEventListener("mousedown", event => {
  console.log(event.eventPhase);
}, true)