JSFiddle - React, Tailwind, and code Playground
by Shishir Morshed
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {display: flex; position: absolute; width: 100vw; height: 100vh;}
.box { width: 50%; height: 50%; position: absolute;}
.box:nth-of-type(2n) { left: 50%; }
.box:nth-of-type(2n+3) { top: 50%; }
.box:nth-of-type(2n+4) { top: 50%; left: 50%; }
.box>.box>.box>.box { border: 1px solid; display: flex; align-items: center; justify-content: center;}
</style>
</head>
<body>
<div class="box">
<div class="box">
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="box">
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="box">
<div class="box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box">
<div class="box"></div>
<div...