Here is what I need to design along with the code I have written,
HTML:
<div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'>
<img className='bg-transparent w-20 h-28 absolute md:top-40 md:left-10 -left-10 z-50 ' src="images/Frame.png" alt="" />
<img className='bg-transparent w-20 h-28 absolute md:top-10 md:right-10 -right-10 z-50' src="images/Frame.png" alt="" />
</div>
CSS
.gradient{
background: linear-gradient(90deg, #9C4F96 0%, #FF6355 17.19%, #FBA949 34.38%, #FAE442 49.48%, #8BD448 69.79%, #2AA8F2 100%);
transform: skewY(-7deg);
overflow: hidden;
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
However, the output I am getting looks like this
I attempted to remove the clip-path property to check if that was causing any issues but it did not solve the problem.