JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="regular">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<ul class="alternative">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

CSS

ul {
  width: 550px;
  margin: 30px auto;
  list-style: none;
}

ul:after {
  clear:both;
  display: table;
  content: "";
}

li {
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  float: left;
  background: hotpink;
  position: relative;  
  text-align: center;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 100px;
  color: white;
}

li:hover {
  background: pink;
}

.alternative li:nth-child(2) { top: 110px; left: -110px; }
.alternative li:nth-child(3) { left: -110px; }
.alternative li:nth-child(4) { top: 110px; left: -220px; }
.alternative li:nth-child(5) { left: -220px; }
.alternative li:nth-child(6) { left: 220px; }
.alternative li:nth-child(7) { top: -110px; left: 220px; }
.alternative li:nth-child(8) { left: 110px; }
.alternative li:nth-child(9) { left: 110px; top: -110px; }