JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="nav">
    <img src="logo.jpg" alt="Logo" class="logo">
    <nav class="main-menu">
      <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
      </ul>
    </nav>
  </div>
  <div class="title">
    <h1>Hi, we are <span>Lorem ipsum dolor</span>.<br>consectetur adipisicing elit.</h1>
    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
  </div>
  <div class="button">
    <button type="button">button1</button>
    <button type="button">button2</button>
  </div>
</header>

CSS

header {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.logo {
 border-radius: 50%;
 border: 1px solid #9C6;
 width: 100px;
 height: 100px;
 margin: 10px 0 0 10px; 
}

.main-menu ul {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 30px;
 list-style: none;
}

.nav {
 text-align: center;
}