Dada

<div class="canvas">
  <div class="vertical">
    <span>D</span>
    <span>A</span>
    <span>D</span>
    <span>A</span>
  </div>
  <div class="horizontal">
    <span>D</span>
    <span>A</span>
    <span>D</span>
    <span>A</span>
  </div>
</div>

@font-face {
  font-family: "Six Caps";
  src: url("./SixCaps-Regular.ttf");
  font-display: swap;
}

:root {
  --unit: 1;
  --canvas-width: calc(200px * var(--unit));

  --font-size: calc(8rem * var(--unit));

  --vertical-text-margin: calc(0.75rem * var(--unit));
  --horizontal-text-gap: calc(0.5rem * var(--unit));
  --horizontal-text-margin: calc(2rem * var(--unit));
}

* {
  box-sizing: border-box;
}

body {
  height: 100dvh;

  display: grid;
  place-items: center;
}

.canvas {
  width: var(--canvas-width);
  height: calc(var(--canvas-width) * 1.33);

  position: relative;
  background-color: #6e9aa4;

  font-family: "Six Caps", sans-serif;
  font-size: var(--font-size);

  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.vertical {
  width: inherit;
  height: inherit;
  margin-top: var(--vertical-text-margin);

  position: absolute;

  display: grid;
  grid-template-rows: repeat(4, 1fr) 10%;

  color: white;
}

.vertical span {
  writing-mode: vertical-lr;
}

.vertical span:nth-of-type(1),
.vertical span:nth-of-type(3) {
  justify-self: end;
  line-height: 2em;
}

.vertical span:nth-of-type(2),
.vertical span:nth-of-type(4) {
  justify-self: start;
  line-height: 1.2em;
}

.horizontal {
  width: inherit;
  height: inherit;
  margin: 0 var(--horizontal-text-margin);

  position: absolute;

  display: flex;
  gap: var(--horizontal-text-gap);
}

.horizontal span:nth-of-type(1) {
  margin-top: calc(1.1rem * var(--unit));
}

.horizontal span:nth-of-type(2) {
  margin-top: calc(3rem * var(--unit));
}

.horizontal span:nth-of-type(3) {
  margin-top: calc(-0.5rem * var(--unit));
}

.horizontal span:nth-of-type(4) {
  margin-top: calc(5.8rem * var(--unit));
}

@media (min-width: 650px) {
  :root {
    --unit: 3;
  }
}

let vertical = document.querySelector(".vertical");
let horizontal = document.querySelector(".horizontal");
let canvas = document.getElementsByClassName("canvas")[0];

const tl = new TimelineMax();

tl.set(vertical, {
  transformOrigin: "center center -100px",
  backfaceVisibility: "hidden",
  rotationY: "180",
  opacity: 1,
});

tl.set(horizontal, {
  transformOrigin: "center center -100px",
  backfaceVisibility: "hidden",
  rotationX: "180",
  opacity: 1,
});

tl.to(vertical, 1.5, {
  rotationY: "0",
});

tl.to(horizontal, 1.5, {
  rotationX: "0",
});

canvas.addEventListener("click", () => {
  tl.restart();
});