JSFiddle - React, Tailwind, and code Playground
HTML
<section class="about-us">
<div class="about-us-img">
<div class="about-us-img-gradient"></div>
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
font-size: 0;
box-sizing: border-box;
}
.about-us {
padding: 50px 0;
display: flex;
justify-content: center;
}
.about-us-img {
background-image: url(https://svgshare.com/i/McT.svgg);
}
.about-us-img-gradient {
width: 555px;
height: 700px;
background-image: linear-gradient(to top, rgba(252, 95, 69, 0.29) 0%, rgba(0, 0, 0, 0) 100%);
border: 10px solid rgba(0, 0, 0, 0.2);
}