JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <article></article>
  <footer></footer>
  <header></header>
  <nav data-secondary></nav>
  <nav data-primary>
    <div>Website Title</div>
  </nav>
</div>

SCSS

@mixin -position($position:relative, $top:0, $right:0, $bottom:0, $left:0) {
      position: $position;
      @if $position !=relative {
        top: $top;
        right: $right;
        bottom: $bottom;
        left: $left;
      }
    }
    
    @mixin -transform($transform) {
      -ms-transform: $transform;
      -webkit-transform: $transform;
      transform: $transform;
    }
    
    @mixin -transform-origin($origin) {
      -ms-transform-origin: $origin;
      -webkit-transform-origin: $origin;
      transform-origin: $origin;
    }
    
    nav[data-primary] {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
      width: 40px;
      line-height: 40px;
      @include -position(fixed, 0, auto, 0, 24px);
      /*@include -transform(rotate(-90deg));
      @include -transform-origin(left bottom);*/
      -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-rl;
  writing-mode: tb-lr;
 /*  writing-mode:sideways-lr;or eventually untill sideways-lr is working everywhere */
  transform: scale(-1, -1);
      > * {
        white-space: nowrap;
      }
    }