JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <title>eco</title>
</head>
<body>
  <header class="header">
    <ul class="nav">
      <li class="nav-items">HOME</li>
      <li class="nav-items">APP</li>
      <li class="nav-items">STORE</li>
   </ul>
   
   <div class="home">
     <div class="home__right">
       <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero itaque, recusandae sint perferendis ipsum.</p>
       
      <h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1> 
     </div>
     
     <home class="home__left">
       <h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur adipi!</h1>
     </home>
   </div>

  </header>
  
</body>

SCSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



.header {
  height: 80vh;
  background-color: blue;
}

.nav {
  display: flex;
  height: 4rem;
  background-color: orangered;
  justify-content: center;
  
    .nav-items {
      padding-right: 3.5rem;
      padding-top: 1.5rem;
      list-style: none;
    }
}

.home {
  display: flex;
  
  &__right {
    background-color: pink;
    flex-basis: 50;
    
  }
  
  &__left {
    background-color: white;
    flex: 1;
    
  }
  
}