Symmetrically shrinking Tailwind cards

Question

I have four cards aligned in flex raw. Each card has image and text respectively. The gap between each card is 24px (gap-6). However the image sizes of cards are not equal and when shrinks the proportion/symmetry is not maintained. Kindly, advice how can I fix this.
Respective code is in playground: https://play.tailwindcss.com/BEc01nvdZj

Answer 1

Here's how I would approach it:

First, we would set each card to take 1/4 of its container by applying w-1/4 to each card. We'll also use a responsive utility (md:) because we want each card to take the full width of the container when the screen is smaller than 768px:

<div class="max-w-sm border bg-white md:w-1/4">
  <a href="#"> <img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" /> </a>
  <div class="p-5">
    <a href="#">
      <h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem, ipsum dolor.</h5>
    </a>
    <p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum asperiores expedita harum eius veritatis minus unde et minima aut numquam!.</p>
  </div>
</div>

---

Now that we have a fixed position for each card, we'll apply some classes to take care of the images width, height, and content.

1. width: Each image should take the whole width of the container. Therefore we apply w-full.
2. height: Each image should have a fixed height. This way, we can ensure that the height of each image will be identical. In this example, I set the height to be h-[12.5rem].
3. content (Docs): We want to make sure that each image will always cover the full size we set (full width and 12.5rem height). This is why we use the object-cover utility. This utility will make sure that the image will cover its container. We could also use object-fill but it will stretch the image quite a bit.

<img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" />

Tailwind-play

---

Full Code:

<section class="container mx-auto my-4">
  <div class="section-header">
    <div class="section-title"><h1 class="font-BPGBannerCaps font-bold tracking-wide">Lorem, ipsum.</h1></div>
    <hr class="mb-4 h-px border-0 bg-gray-400 dark:bg-gray-700" />
  </div>
  <div class="projects w-full md:flex md:gap-6">
    <div class="max-w-sm border bg-white md:w-1/4">
      <a href="#"> <img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" /> </a>
      <div class="p-5">
        <a href="#">
          <h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem, ipsum dolor.</h5>
        </a>
        <p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum asperiores expedita harum eius veritatis minus unde et minima aut numquam!.</p>
      </div>
    </div>

    <div class="max-w-sm border bg-white md:w-1/4">
      <a href="#"><img src="https://images.unsplash.com/photo-1526628953301-3e589a6a8b74" alt="" class="h-[12.5rem] w-full object-cover" /></a>
      <div class="p-5">
        <a href="#">
          <h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur.</h5>
        </a>
        <p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, repellat dolore. Reprehenderit, modi ullam placeat nam pariatur quas perspiciatis possimus porro ratione? Ad molestias perspiciatis iste ex unde neque enim repellendus sed fugiat consectetur? Voluptatem expedita eum voluptatum explicabo modi.</p>
      </div>
    </div>

    <div class="max-w-sm border bg-white md:w-1/4">
      <a href="#"><img src="https://images.unsplash.com/photo-1635695604201-2b718204bccb" alt="" class="h-[12.5rem] w-full object-cover" /></a>
      <div class="p-5">
        <a href="#">
          <h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum.</h5>
        </a>
        <p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta animi atque totam eos nam doloremque iusto qui odio officia doloribus saepe aspernatur dolore eligendi culpa, quos aliquam vel voluptatibus non!</p>
      </div>
    </div>

    <div class="max-w-sm border bg-white md:w-1/4">
      <a href="#"><img src="https://images.unsplash.com/photo-1640545232493-9a9b5c88ede4" alt="" class="h-[12.5rem] w-full object-cover" /></a>
      <div class="p-5">
        <a href="#">
          <h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat enim saepe ex. Temporibus, atque nihil.</h5>
        </a>
        <p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus velit voluptate, doloremque asperiores sapiente earum ut obcaecati ipsa necessitatibus itaque similique incidunt. Blanditiis modi nulla pariatur inventore soluta, quo similique quidem quasi perspiciatis nesciunt numquam rerum natus tenetur, consequatur nihil atque, beatae error itaque aspernatur iusto? Architecto vel ea cupiditate.</p>
      </div>
    </div>
  </div>
</section>