JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <a class="header__logo" href="#">LOGO</a>
</div>

SCSS

$logoHeight: 40px;

html, body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, red 0%, green 50%, blue 100%);
}

.header {
  text-align: center;
  border-top: 1px solid black;
  margin-top: $logoHeight / 2;
  
  &__logo {
    display: block;
    box-sizing: border-box;
    width: 150px;
    height: $logoHeight;
    line-height: $logoHeight;
    border: 1px solid #000;
    background: white;
    border-radius: 50%;
    text-decoration: none;
    margin: -$logoHeight/2 auto;
  }
}