JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="log-data">123</div>


<div class="box-parent">

  <div class="box size1x1">1</div>
  <div class="box size2x1">2</div>
  <div class="box size1x1">3</div>
  <div class="box size1x1">4</div>
  <div class="box size1x2">5</div>
  <div class="box size2x1">6</div>
  <div class="box size2x1">7</div>
  <div class="box size1x2">8</div>
  <div class="box size1x1">9</div>
  <div class="box size1x1">10</div>
</div>

SCSS

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: sans-serif;
  font-size: 14px;
}

#log-data {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px;
  background: #000;
  color: #fff;
  opacity: .4;
}

.box-parent {
  position: relative;
  background: yellow;
}

.box {
  display: block;
  position: absolute;
  background: green;
  box-shadow: inset 0px 0px 5px 3px orange;
  color: #fff;
  &.size1x1 { width:50px;height:50px; }
  &.size2x1 { width:100px;height:50px; }
  &.size1x2 { width:50px;height:100px; }
}