Gap Between Cards in Tailwind

user_15879929 0
Viewed 342

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

tailwind-ui tailwind-css
2 Answers

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

user_109623640

This is my proposition:

  • Instead of grid i suggest using flexbox. I used additional properties to center the cards items-center justify-center h-screen
  • Remove all margin and padding from the first divs of the card: m-4 my-20 & py-4 px-8. Later, You can adjust it as desired.
  • You can now use gap property as much as You want ;-) In parent div.

Good Luck and Best regards !

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex items-center justify-center h-screen gap-0">
      <!-- component -->
      <div class="max-w-md rounded-lg bg-white shadow-lg">
        <div class="-mt-16 flex justify-center">
          <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="max-w-md rounded-lg bg-white shadow-lg">
        <div class="-mt-16 flex justify-center">
          <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>
  </body>
</html>

user_137059790
Related