JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="headerBoundary">
  <div class="headerLeft">
    <div class="headerLeftInner"></div>
  </div>
  <div class="headerRight">
    <div class="headerRightInner"></div>
  </div>
  <div class="headerText">
    <div class="headerTextUpper"></div>
    <div class="headerTextMiddle"></div>
    <div class="headerTextLower"></div>
  </div>
</div>

CSS

.headerRight {
  background: blue;
  background-image: url("https://www.navytimes.com/resizer/v2/EUJFPE2RA5AB3J2SYGMA7I6EUU.jpg?auth=bb11f22f876deacdd793d60ccb40d2116fce2106ee389b52beb8d96e7bc035dc&width=1000&height=667");
  background-size: cover;
  width: 700px;
  height: 200px;
}
.headerLeft {
  background: linear-gradient(to right, #001a3d 170px, rgba(100,100,255,.2));
  z-index: 999;
  width: 700px;
  height: 200px;
  position: absolute;
}
.headerLeftInner {
  background-image: url("https://www.navfac.navy.mil/Portals/68/Images/Business-Lines/Office-of-Small-Business-Programs/SB%20Photos/OSBP%20(2).PNG?ver=Zzft_y9y8NDc3Jo7h8e4bQ%3D%3D");
  position: absolute;
  width: 150px;
  height: 150px;
  margin: 20px;
  background-size: cover;
}
.headerText {
  color: white;
  
}