I'm creating a flat listview for a React website. This is a picture of my mockup:

I succed to obtain this:

Next, I would like to limit the size of the flat list and display the overflow-x-scroll. The problem is, when I put a size, my first image have a wrong display...

This is my code (I use tailwind):

import React from "react";

export type CarrouselProps = {
    images: string[],
    size: number
}
const Carrousel: React.FC <CarrouselProps>  = ({images, size}) => {

    return(
        <div>
            <div className="flex flex-row overflow-x-scroll w-[700px]">
                {images.map(url => 
                    <input className={`w-[${size}px] h-[${size}px] mr-4 object-cover rounded-md`} type="image" src={url} /> 
                )}
            </div>
            <div className="h-1 mt-3 bg-white w-[700px]"/>
        </div>
    );
}

export default Carrousel;

Could you help me to fix this wrong display on the first image ? I specify that only the first image have portrait display

Thanks in advance, for your help