JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<div class='grid'>
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

CSS

body {
  background: #eee;
}

.grid {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  background: white;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 180px;
  height: 180px;
  background: tomato;
  margin: 10px;
  transition: 300ms all;
}

.block:nth-of-type(1) {
  transform-origin: left top;
}

.block:nth-of-type(2) {
  transform-origin: right top;
}

.block:nth-of-type(3) {
  transform-origin: left bottom;
}

.block:nth-of-type(4) {
  transform-origin: right bottom;
}

.expanded {
  transform: scale(2.11);
  background: crimson;
}

JavaScript

document.body.addEventListener('click', onClick)

function onClick(e) {
  if (e.target.matches('.block')) {
    e.target.classList.toggle('expanded')
  }
}