JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <div id="heading">
    <div id="colD">empty</div>
    <div id="colE">
      <p><img class="floral-icon" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="floral icon" width="32" height="32"></p>
    </div>
    <div id="colF">
      <p>Lewis</p>
    </div>
    <div id="colG">
      <p><img class="floral-icon" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="floral icon" width="32" height="32"></p>
    </div>
    <div id="colH"></div>
  </div>

CSS

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  background-blend-mode:screen;
  background-color:rgba(255, 230, 184, 0.66);
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}

#content {
  float: left;
  height: 1800px;
  width: 960px;
  font-size: 1.1em;
  line-height: 1.2em;
  z-index: 1;
  position: relative;
}