JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<nav class="main-nav">
  <div class="logo">
    Upside Down
  </div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Imprensa</a></li>
    <li><a href="#">Contato</a></li>
    <li><a href="#">Trabalhe Conosco</a></li>
    <li><a href="#">Sobre</a></li>

  </ul>
</nav>

<p class="sp-surround-12">
  Frase 1
</p>

<p class="sp-surround-12" style="height: 200rem">
  Isso é um espaçador
</p>

<p class="sp-surround-12">
  Frase 2
</p>

SCSS

* {
  margin: 0;
  padding: 0;
}
:root {
  font-size: 16px;
}

body {
  transform: rotateZ(180deg);
  margin: 0;
  min-height: 100vh;
  > * {
    transform: rotateZ(180deg);
  }
  
}

.sp-surround-12 {
  padding: 12px;
}
nav.main-nav {
  width: 100vw;
  height: 4rem;
  background: rgba(0,89,169,0.8);
  display: flex;
  justify-content: flex-start;
  > .logo {
    line-height: 4rem;
    font-weight: 500;
    padding: 0 16px;
    font-size: 1.6rem;
    color: #f2f2f2;
  }
  > .menu {
    margin: 0;
    list-style: none;
    display: flex;
    > li {
      line-height: 4rem;
      padding: 0 12px;
      font-size: 1.2rem;
      display: block;
      > a {
        color: #f2f2f2;
      }
    }
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  window.scrollTo(0, document.body.clientHeight);
});