section is a flex container with two div child. Both the divs are also flex container with img being it’s children. Every div has 3 images. image of div1 is overlapped by the image of div2.

function ImageSlider() {
  return (
    <>
      <section className="   h-72 w-full flex ">
        <div
          className={` slide h-full max-w-fit   group-hover:pause-animation flex  `}>
          {images.map((img) => {
            return (
              <img
                src={img.src}
                alt={img.id}
                key={img.id}
                className="h-full  "
              />
            )
          })}
        </div>
        <div
          className={` slide h-full max-w-fit   group-hover:pause-animation flex  `}>
          {images.map((img) => {
            return (
              <img
                src={img.src}
                alt={img.id}
                key={img.id}
                className="h-full"
              />
            )
          })}
        </div>
      </section>
    </>
  )
}

export default ImageSlider