How to use layout responsive with Nextjs and tailwind?

I am trying to create a card with image on the left and the card content on the right using flex in NEXTJS and Tailwind CSS.

So, I am trying to have that image to be responsive.

      <div className="block">
        <Image
          src={item.cover}
          alt="Picture of the something nice"
          width={200}
          height={200}
          layout="responsive"
          quality={65}
        />
      </div>

I have this setup for the image in a card.

  <div className="container max-w-3xl text-white bg-card flex rounded space-x-5">
      <div className="block">
        <Image
          src={item.cover}
          alt="Picture of the something nice"
          width={200}
          height={200}
          layout="responsive"
          quality={65}
        />
      </div>

      <section className="flex flex-col mt-2">
        <h1 className="capitalize text-lg font-semibold">{item.title}</h1>
        <h2>{item.alias}</h2>
        <h3>{item.artist}</h3>
        <h3>{item.author}</h3>
        <p>{item.description}</p>
      </section>
    </div>

The image disappears.

So, I have tried using layout=fill. The image shows but it is not taking the cover image effect as expected. Here is the <Image/> with layout=fill and objectFit=cover.

      <div className="block w-36 relative">
        <Image
          src={
            'https://images.unsplash.com/photo-1651786291345-d6e61ac65358?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80'
          }
          alt="Picture of the something nice"
          layout="fill"
          objectFit="cover"
        />
      </div>

But the image is not responsive and does not take cover.

Solution

Use this code to make your card. See in full page.

To use nextJs Image , then just try to wrap <Image> with <div> having same properties of <img> in the below code and remove height and width from <Image>. Keep layout =responsive.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container m-auto p-4">
  <div class="flex justify-center">
    <div class="flex flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
      <img class=" w-full h-96 md:h-auto object-cover md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg" src="https://mdbootstrap.com/wp-content/uploads/2020/06/vertical.jpg" alt="" />
      <div class="px-6 py-10 flex flex-col justify-start">
        <h5 class="text-gray-900 text-xl font-medium mb-2">Card title</h5>
        <h5 class="text-gray-500 text-md font-extralight mb-2">Artist</h5> 
        <p class="text-gray-700 text-base mb-4">
          This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </p>
        <p class="text-gray-600 text-xs">Author</p>
      </div>
    </div>
  </div>
</div>