JSFiddle - React, Tailwind, and code Playground

by maremp

HTML

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

div {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite alternate;
  background: rgba(0, 0, 0, 0.1);
  /*opacity: 0.1;*/
  display: relative;
}

div > div {
  width: 90vw;
  height: 90vh;
  z-index: 2;
  /*opacity: 0.2;*/
}

div > div > div {
  width: 80vw;
  height: 80vh;
  z-index: 3;
  /*opacity: 0.3;*/
}

div > div > div > div {
  width: 70vw;
  height: 70vh;
  z-index: 4;
  /*opacity: 0.4;*/
}

div > div > div > div > div {
  width: 60vw;
  height: 60vh;
  z-index: 5;
  /*opacity: 0.5;*/
}

div > div > div > div > div > div {
  width: 50vw;
  height: 50vh;
  z-index: 6;
  /*opacity: 0.6;*/
}

div > div > div > div > div > div > div {
  width: 40vw;
  height: 40vh;
  z-index: 7;
  /*opacity: 0.7;*/
}

div > div > div > div > div > div > div > div {
  width: 30vw;
  height: 30vh;
  z-index: 8;
  /*opacity: 0.8;*/
}

div > div > div > div > div > div > div > div > div {
  width: 20vw;
  height: 20vh;
  z-index: 9;
  /*opacity: 0.9;*/
}

div > div > div > div > div > div > div > div > div > div {
  width: 10vw;
  height: 10vh;
  z-index: 10;
  /*opacity: 1;*/
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 5vw #000;
  }
  100% {
    box-shadow: 0 0 0.1px #000;
  }
}