JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


<svg class="box6" width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="170" height="170" fill="teal" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="orange" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="teal" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="teal" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="orange" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="teal" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>

     <div class="box7">
      <div class="color1">
        <div class="color2">
          <div class="color3">
            <div class="color4">
              <div class="color5">
                <div class="color6">
                  <div class="color7">
                    <div class="color8">
                      <div class="color9">
                        <div class="color10">
                          <div class="color11">
                            <div class="color12">
                              <div class="color13">
                                <div class="color14">
                                  <div class="color15">
                                    <div class="color16">
                    ...

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 530px;
  height: 530px;
}


.box1 {
  height: 170px;
  width: 170px;
  margin: 0 5px 5px 0;
  background:
    linear-gradient(teal, teal) center / 10px 10px no-repeat,
    linear-gradient(black, black) center / 20px 20px no-repeat,
    linear-gradient(orange, orange) center / 30px 30px no-repeat,
    linear-gradient(black, black) center / 40px 40px no-repeat,
    linear-gradient(teal, teal) center / 50px 50px no-repeat,
    linear-gradient(black, black) center / 60px 60px no-repeat,
    linear-gradient(orange, orange) center / 70px 70px no-repeat,
    linear-gradient(black, black) center / 80px 80px no-repeat,
    linear-gradient(teal, teal) center / 90px 90px no-repeat,
    linear-gradient(black, black) center / 100px 100px no-repeat,
    linear-gradient(orange, orange) center / 110px 110px no-repeat,
    linear-gradient(black, black) center / 120px 120px no-repeat,
    linear-gradient(teal, teal) center / 130px 130px no-repeat,
    linear-gradient(black, black) center / 140px 140px no-repeat,
    linear-gradient(orange, orange) center / 150px 150px no-repeat,
    linear-gradient(black, black) center / 160px 160px no-repeat,
    linear-gradient(teal, teal) center / 170px 170px no-repeat;
  background-repeat: no-repeat;
}

.box2 {
  width: 170px;
  height: 170px;
  margin: 0 5px 5px 5px;
  box-shadow:
    inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
    inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
    inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
    inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
    inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}

.box3 {
  width: 170px;
  height: 170px;
  margin: 0 0 5px 5px;
  box-shadow:
    inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0...