JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header">
    <div  class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
    <div  class="header_eta"></div>
  </div>
  
<div  class="content">
  <div class="dummy"></div>

    <div class="img-container">
        <img src="http://placehold.it/75x75" alt="" />
    </div>

  
</div>

<div  class="footer">sdfsd</div>
</div>

CSS

.content {
    height: 100px;
    position: relative;
    width: 100%;
    border: 1px solid black;
    background-color: rgb(239, 65, 59);
}

.header {
    height: 60px;
    background-color: rgb(55, 102, 199);
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}



.headliner {
  padding:10px;
  height:50px;
}
.footer {
    height: 40px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-top: 5px;
    background-color: rgb(66, 199, 123);
    text-align: left;
}