#app

* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #d1e5fa;
  overflow: hidden;
}

:root {
  --size: 15vmin;
  --size-min: 60px;
  --show: 0;
}

.boxes {
  display: flex;
}
.boxes--nested {
  transform: translate(calc(-50% - max(var(--size-min), var(--size))), 0);
}
.box {
  --color: hsl(var(--hue, 10), 50%, 50%);
  height: var(--size);
  width: var(--size);
  min-height: var(--size-min);
  min-width: var(--size-min);
  display: flex;
  flex: 1 0 max(var(--size-min), var(--size));
  place-items: center;
  background: #fff;
  transform-origin: 100% 100%;
  position: relative;
  transition: transform 0.25s;
  transform: rotate(calc(var(--transform, 0) * 90deg));
}

.box--0 {
  --hue: 180;
}
.box--1 {
  --hue: 320;
}
.box--2 {
  --hue: 210;
}
.box--3 {
  --hue: 280;
}

.box__content {
  flex: 1 0 max(var(--size-min), var(--size));
  display: grid;
  place-items: center;
}
.box:after {
  content: '';
  position: absolute;
  height: 75%;
  width: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.5vmin var(--color) solid;
}

.box__arrow {
  height: max(var(--size-min), var(--size));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--color);
}

.box__index {
  color: var(--color);
  opacity: var(--show);
  font-family: sans-serif;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  transition: opacity 0.25s;
}

import React, { useState, useEffect } from "https://cdn.skypack.dev/react";
import { render } from "https://cdn.skypack.dev/react-dom";
import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const ROOT_NODE = document.querySelector("#app");

const App = () => {
  
  const [nested, setNested] = useState(false);
  const [transformed, setTransformed] = useState(false);
  const [show, setShow] = useState(false);
  
  useEffect(() => {
    document.documentElement.style.setProperty('--transform', transformed ? 1 : 0)
  }, [transformed])
  
  useEffect(() => {
    document.documentElement.style.setProperty('--show', show ? 1 : 0)
  }, [show])
  
  useEffect(() => {
    const CONFIG = {
      transformed,
      nested,
      show,
    }
    const CTRL = new GUI()
    CTRL.add(CONFIG, 'nested').name('Nested').onChange(setNested)
    CTRL.add(CONFIG, 'transformed').name('Transform').onChange(setTransformed)
    CTRL.add(CONFIG, 'show').name('Show Index').onChange(setShow)
  }, [])
  
  if (!nested) return <div className='boxes'>
    {
      new Array(4).fill().map((_, index) => 
        <div className={`box box--${index}`}><span className="box__content"><svg className="box__arrow" viewBox="0 0 320 512" title="angle-up">
  <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" />
</svg><span className="box__index">{index}</span></span></div>)
     }
  </div>;
  
  return <div className='boxes boxes--nested'>
    <div className='box box--0'>
      <span className="box__content">
        <svg className="box__arrow" viewBox="0 0 320 512" title="angle-up">
  <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" />
        </svg><span className="box__index">0</span></span>
      <div className='box box--1'>
        <span className="box__content"><svg className="box__arrow" viewBox="0 0 320 512" title="angle-up">
  <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" />
          </svg><span className="box__index">1</span></span>
        <div className='box box--2'>
          <span className="box__content"><svg className="box__arrow" viewBox="0 0 320 512" title="angle-up">
  <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" />
            </svg><span className="box__index">2</span></span>
          <div className='box box--3'>
            <span className="box__content"><svg className="box__arrow" viewBox="0 0 320 512" title="angle-up">
  <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" />
              </svg><span className="box__index">3</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
};

render(<App />, ROOT_NODE);