css - 无法在tailwindcss框架中保持div的宽度

Question

我正在尝试制作示例 TailwindCSS 卡片元素的副本，但不是默认样式（下例中的底部），我想将图片的区域设置为另一个文本区域。

但是，我无法让（前）图片div保持其宽度/尺寸与其中有图片时的方式相同。目前，div最上面卡片内的两个 s 似乎重叠。

我错过了什么？当其中有图片时，如何使（前）图片div在窗口调整大小等时保持宽度，就像在原始图片中一样？

      <div>

        <div class="max-w-md mx-auto bg-indigo-100 rounded-xl m-5 shadow-md overflow-hidden md:max-w-2xl">
          <div class="bg-black-100 w-1/2 ">
            <p class="bg-black-100">Testing text</p>
          </div>
          <div class="w-1/2">
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">WELCOME</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Rec</a>
              <p class="mt-2 text-gray-500">Testing text</p>
            </div>
          </div>
        </div>
      </div>


      <div>

        <div class="max-w-md mx-auto bg-white rounded-xl m-5 shadow-md overflow-hidden md:max-w-2xl">
          
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:h-full md:w-48" src={`${process.env.PUBLIC_URL}/img/photo-test.png`} alt="Man looking at item at a store" />
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">2021 - Present · STUFF</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">STUFF</a>
              <p class="mt-2 text-gray-500">Testing text</p>
            </div>
          </div>
        </div>
      </div>
      <div>

标签： csstailwind-css