Position background content to right - tailwind-css

Question

I am having trouble positioning background color gray content to right side of my website. Any suggestions?
export function ContentImage(props: ImageProps): ReactElement | null {
const cn = classNames(
'relative sm:py-16 lg:py-0 m-0 right-0',
props.position === 'left' ? 'order-first' : 'order-first sm:order-last',
);
const backgroundCn = classNames(
'absolute inset-y-0 w-full bg-gray-50 rounded-r-3xl lg:right-72',
props.position === 'left' ? 'right-1/2' : 'left-3/4',
props.position === 'right' ? 'rounded-l-3xl' : 'rounded-r-3xl',
);
return (
<>
<div className={cn}>
<div
aria-hidden="true"
className="hidden overflow-hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
<div className={backgroundCn}/>
<svg
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392">
<defs>
<pattern
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse">
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={392}
fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
/>
</svg>
</div>
<div className="relative order-last mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
<div className="relative overflow-hidden pt-64 pb-10">
<div className="absolute inset-0 h-full w-full">
<Image
src={props.image}
alt={props.imageAlt}
objectFit="cover"
layout="fill"
className={props.className}
/>
</div>
</div>
</div>
</div>
</>
);
}