JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="block1">
        1111111111111111
       
    </div>
     <div class="block2">
            22222222222222222<hr>
        </div>
</div>

<div class="block3">	
    3333333
</div>
<hr>

CSS

.wrap{
    position: relative;
    width:400px;
     margin:0 auto;
}
.block1{
    height:300px;
    background:#0C3;
   
    border:1px solid #DDD;
}
.block2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.block3{
    text-align:center;
    padding-top:3px;
    color:#999;
    background:#000
}