JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header
    <div class="bar">bar</div>
</div>
<div class="slider">slider</div>

CSS

.header{
    height:200px;
    background:#fcc;
    position:relative;
}
.bar{
    height:40px;
    width:300px;
    background:#cfc;
    position:absolute;
    bottom:-20px;
    left:50%;
    margin-left:-150px;
}
.slider{
    height:200px;
    background:#ccf;
}