JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <div class="headerbar">
    <div class="logo"></div>
    <p>Link 1</p>
    <p>Link 2</p>
    <p>Link 3</p>
  </div>
</html>

CSS

.headerbar {
  display: flex;
  align-items: stretch;

  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  aspect-ratio: 1/1;
  flex: 0 0 auto;

  border-radius:5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}