JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<div class="wrap">
    <div class="inner">rrr</div>
    <img class="img" src="http://placekitten.com/600/300" alt="" />
</div>

CSS

body{

}
.wrap{
    position: relative;
    height: 500px;
    min-width: 300px;    
    overflow: hidden;
}
.img{
    position: absolute;
    display: block;
    top 0;
    left: 50%;
    margin-left: -300px;   
}
.inner{
    position: absolute;
    height: 1000px;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    background-color: red;
}