J'utilise TailwindCSS pour créer le design de ma page. Je ne parviens pas à définir le composant et l'image à la même taille.

J'ai essayé quelques combinaisons avec flex, wrap, en changeant la largeur des divs ou des images, mais je ne trouve pas de solution. Le résultat que je souhaite est que chaque film contient le rectangle de même taille contenant l'image, l'image de même taille avec le nom suivant. De plus, pour les débordements, je souhaite pouvoir les faire défiler sur l'échelle des x, mais pas sur l'échelle des y. J'ai réussi à le faire mais je dois le garder et avoir la bonne taille aussi.

Je veux que l'image s'affiche comme ceci : (https://i.stack.imgur.com/16C7M.jpg) Mais maintenant, ils ressemblent à ceci : (https://i.stack.imgur.com/8L0sD.png).

Le code d'une image est le même pour toutes les images, seul le lien vers l'image et son nom changent. Code pour une image :

<div
            class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-wrap duration-500 w-1/6"
          >
            <img
              src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg"
              alt="movie poster"
              class="rounded-t-[0.625rem] rounded-b-none w-full"
            />
            <div class="">
              <h1 class="text-xl font-normal">I am not okay with this</h1>
            </div>
          </div>

Le code précédent est inclus dans le code suivant :

<div class="container mx-auto">
      <div class="m-5">
        <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
        <div class="flex overflow-y-hidden overflow-x-scroll border-4">
        ....
        .... (put here the code for the images)
        ....
        </div>
     </div>
</div>

Merci pour votre aide