JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div id="container">
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
  <a href="#">
    <div></div>
  </a>
</div>

CSS

* { margin: 0; padding: 0; }
#container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}
a { position: relative; display: block; width: 25%; padding-left: 10px; padding-bottom: 100%; background: pink; }
a > div { background: red; width: 100%; height: 100%; transition: all 150ms ease; z-index: 50; }
a > div.active { opacity: 1; transform: scale(1); pointer-events: auto; }

JavaScript

document.querySelector('button').addEventListener('click', function() {
	document.querySelector('div').classList.toggle('active'); 
});