JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Wiki_Makes_Video_logo.png" alt="Demonstration image. This image is in the public domain." id="image" />
    </div>
</div>
<div class="outer">
    <div class="inner">
        <p>Bar.</p>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }

.outer
{
    width: 100%;
    height: 220px;
    
    
    background-color: lightgray;
}

.inner
{
    width: 80%;
    height: 260px;
    
    margin: 0 auto;
    
    
    background-color: gray;
    
    text-align: center;
}

#image
{
    width: 300px;
    height: 120px;
    
    margin-top: 180px;
    z-index: 10;
    position:absolute;
}