JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<section class="section">
  <div class="vbx_top">
    <div class="nav_header">
      <div class="vbx_sign_in"><a href="#">Sign In</a></div>
      <div class="vbx_register"><a href="#">Register</a></div>
    </div>
    <div class="artinfo_header">
      <span class="promopitch"></span>
      <span class="monthpitch"></span>
      <span class="artis_subtitle"></span>
    </div>
    <div class="artist_bar">

    </div>
  </div>
</section>

CSS

body {
  margin: 0;
}

.section {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.vbx_top {}

.nav_header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
  width: 100vw;
  height: 3.4em;
  background: red;
}