JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main grid">
	<div class="boxs grid">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
		<div class="box">5</div>
		<div class="box">6</div>
		<div class="box">7</div>
		<div class="box">8</div>
		<div class="box">9</div>
		<div class="box">10</div>
		<div class="box">11</div>
		<div class="box">12</div>
		<div class="box">13</div>
		<div class="box">14</div>
		<div class="box">15</div>
		<div class="box">16</div>

		<button class="start">Нажми</button>
	</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

.grid {
  display: grid;
}

.main {
  height: 100vh;
  justify-content: center;
  align-content: center;
  background-color: #333;
}

.boxs {
  width: 550px;
  height: 550px;
  grid-template-columns: repeat(4, 125px);
  grid-template-rows: repeat(4, 125px);
  grid-gap: 2px;
  justify-content: center;
  align-content: center;
  position: relative;
  color: #333;
  font-size: 24px;
}

.box {
  width: 125px;
  height: 125px;
  line-height: 125px;
  text-align: center;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  transition: transform 0.3s;
}

JavaScript

function rotate(el, rotate) {
  $(el).data({ rotate }).css({ transform: `rotate(${rotate * 90}deg)` });
}

$('.start').click(function(){
  $('.box').each(function() {
    rotate(this, Math.floor(Math.random() * 4));
  });
});

$('.box').data('rotate', 0).click(function(){
  rotate(this, $(this).data('rotate') + 1);
}).on('transitionend', function() {
  if (!$('.box').get().some(n => $(n).data('rotate') % 4)) {
    $('.main').html('DONE!!');
  }
});