CSS positioning issue: Can not position images that floats outside a div

Question

This is what I have to design and I am providing my code below,

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%);
    
}

BUT I am getting a view like this

I tried to remove the clip-path property to see if I was getting an issue cause of clip path but no.

Answer 1

Essentially what you need is only to remove overflow-hidden and I'm not sure why you have the clip path. Look at this example using your old gradient and a new gradient over each other: Tailwind css playground

I also moved the right image up since it seemed like it moved in the wrong direction while testing the code

<div className="relative mt-64 mb-40 md:h-56 h-36 w-screen gradient">
  <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>

.gradient{
  background: linear-gradient(90deg, #9C4F96 0%, #FF6355 17.19%, #FBA949 34.38%, #FAE442 49.48%, #8BD448 69.79%, #2AA8F2 100%);
  transform: skewY(-7deg);
}

I hope this help you out. Have a great day!