Need help on this component design

        <div className='flex h-[569px] gap-[6px] border border-green-500'>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

          <div className='w-[264.88px] skew-x-[-21deg] overflow-hidden'>
            <div className='size-full skew-x-[21deg] bg-blue-950'>
              {/* <Image
              src='/assets/home/img.png'
              alt='img'
              // height={569}
              // width={561}
              // fill
              priority
              quality={100}
              objectFit='cover'
              className='skew-x-[21deg]'
            /> */}
            </div>
          </div>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

        </div>