JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Hi all</h2>
<div class="cover">
    I am going to cover the heading tag
    <div class="content_to_be_clipped"><img src="http://placekitten.com/200/300"></div>
</div>

CSS

h2 {
    font-size: 2.5em;
background-color: #e5dbc2;
display: inline-block;
padding-right: 10px;
line-height: 70%;
margin-bottom: 0;
    z-index:999;
}
.cover {
    position:relative;
    width: 100%;
height: 300px;
padding: 0;
border-radius: 0 0 20px 20px;
    background-color: #efe8d9;
border-top: 5px solid #6e537f;
margin-top: -7px;
overflow: hidden;
z-index: 500;
}