JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div><div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box selected'></div>
<div class='box'></div>
<div class='box selected'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: teal;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  transition: all 0.2s;
}

.selected {
  width: 250px;
  height: 250px;
  transition: all 0.2s;
}