Gap Between Cards in Tailwind

Question

I want to have multiple of this Tailwind card component that I found. I'm trying to get ride of the weird gap between the two cards, I'm not sure whats causing it. I added the gap-0 to the parent div so I don't understand why it's still there. I'm also having trouble understanding why the content is not in the middle of page and starting at the top left.

Here is the Tailwind playground link: https://play.tailwindcss.com/wPqTqYp1jr

Answer 1

The m-4 in each component is causing margin between the two cards. You can remove the gap by adding mr-0 in the first and ml-0 in the second card.

Below is the code

<div class="grid grid-cols-2 gap-0">
  <!-- component -->
  <div class="m-4 mr-0 my-20 max-w-md rounded-lg bg-pink-100 py-4 px-8 shadow-lg">
    <div class="-mt-16 flex justify-center md:justify-end">
      <img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
    </div>
    <div>
      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
    </div>
    <div class="mt-4 flex justify-end">
      <a href="#" class="text-sm font-medium text-indigo-500">Bob Smith</a>
    </div>
  </div>

  <!-- component -->
  <div class="ml-0 my-20 max-w-md rounded-lg bg-blue-100 py-4 px-8 shadow-lg">
    <div class="-mt-16 flex justify-center md:justify-end ">
      <img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
    </div>
    <div>
      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
    </div>
    <div class="mt-4 flex justify-end">
      <a href="#" class="text-sm font-medium text-indigo-500">Virginia Lucas</a>
    </div>
  </div>
</div>

Use tailwind play and check the above code there . Also added bg-color to differentiate between the two cards.

EDIT -1

Just remove the grid grid-cols-2 gap-0 from the main div and add flex flex-row to that div. Then you will not see any gap even in fullscreen also.

Please preview here