JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/solid.min.css">
<header>

  <div class="container">

    <div class="flex">

      <a class="logo">
        <img src="https://i.imgur.com/Yqo4Ogn.png" alt="" />
      </a>

      <form class="search">
        <input type="search" value="" />
      </form>

    </div>

  </div>

  <div class="actions">
      <a href="#" class="menu">
        <i class="fa-solid fa-bars"></i>
      </a>
      <a href="#" class="profile" style="margin-left: .5rem;">
        <i class="fa-solid fa-user"></i>
      </a>
  </div>

</header>

SCSS

HEADER {
  height: 105px;
  background: #f3f4f6;
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 720px;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
  
  &:before {
    display: block;
    content: "";
    height: 105px;
    position: absolute;
    background: red;
    width: 100vw;
    top: 0;
    left: 15px;
    background-size: cover;
    background-image: url('https://i.imgur.com/uxstuv0.jpg');
    background-position: center;
  }
}

.flex {
  position: relative;
  z-index: 10px;
  display: flex;
}

.logo {
  align-self: center;
  
  IMG {
    height: 105px;
  }
}

.search {
   align-self: center;
   padding: 0 15px;
}

.actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  padding: 0 15px;
  
  .menu, .profile {
    align-self: center;
    background: #063a8e;
    color: #fff;
    padding: 5px;
    font-size: 16px;
  }
}