JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="rows fib">
    <div class="cols fill">
      <div class="rows fill">
        <div class="fr tl"></div>
        <div class="fill cols">
          <div class="fc bl"></div>
          <div class="fill rows">
            <div class="fill cols">
              <div class="fill tl fr"></div>
              <div class="fc tr"></div>
            </div>
            <div class="fr br"></div>
          </div>
        </div>
      </div>
      <div class="fc tr"></div>
    </div>
    <div class="fr br"></div>
  </div>
</div>

SCSS

// @author https://twitter.com/antraxis
$phi: 1.618;

* {
  box-sizing: border-box;
}
.rows {
  flex-direction: column;
}
.cols {
  flex-direction: row;
}
.rows,
.cols {
  display: flex;
  .fill {
    flex: 1;
  }
  > * { 
    outline: solid 1px rgba(127,127,127, 0.3);
  }
}
.wrapper {
  position: relative;
  overflow: hidden;
  margin: 10vh auto;
  max-width: 40%;
  border: solid 1px rgba(127,127,127,0.5);
  &:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}
.fib {
  position: absolute;
  width: 100%;
  height: 100%*$phi;
  color: transparent;
}

// proportions
.fr { // fibonacci row
  height: 100%/$phi; // 62%
}
.fc { // fibonacci column
  width: 100%/$phi; // 62%
}

// spiral
$bw: 5px;
.tl, .tr,
.bl, .br {
  border: solid 0 #000;
}
.tl { // top left
  border-radius: 100% 0 0 0;
  border-width: $bw 0 0 $bw;
}
.tr { // top right
  border-radius: 0 100% 0 0;
  border-width: $bw $bw 0 0;
}
.bl { // bottom left
  border-radius: 0 0 0 100%;
  border-width: 0 0 $bw $bw;
}
.br { // bottom right
  border-radius: 0 0 100% 0;
  border-width: 0 $bw $bw 0;
}