Issue with horizontal cards?

Hi everyone,

after the news of laravel news I started to try out Tailwind CSS. At the moment I try to create a horizontal card after the example from your site. For me every image looks a bit strange what I am using on the left side. The image from your site looks a bit strange aswell for looking if I made an error.

I really don't know if this is an issue on my side or from your framework.

above is your example from your site and below in my project

[reinink]

Hey @ForzaSFerrari! Some questions:

1. What browser are you using?
2. Are you using our reset? (@tailwind preflight)
3. Are you using Tailwind with any other CSS frameworks or existing styles?
4. Can you provide the code your working on?

Mainly I use the chrome browser but I see the issue in Firefox and Edge as well. That @tailwind preflight is in main.css at resources/assets/css/. Otherwise I am using Semantic UI mainly and everything of this was deleted for the test of tailwind.

What I also can excluded, is an issue with the Laravel Debugbar because it use his own css file.

That's the code from your site, where the issue already is at me.

<div class="max-w-md flex">
  <div class="rounded rounded-l w-128 text-center overflow-hidden">
    <img class="block h-64" src="https://tailwindcss.com/img/card-left.jpg" alt="Woman holding a mug">
  </div>
  <div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
    <div>
      <p class="text-sm text-grey-dark flex items-center">
        <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
        Members only
      </p>
      <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
      <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-black leading-none">Jonathan Reinink</p>
        <p class="text-grey-dark">Aug 18</p>
      </div>
    </div>
  </div>
</div>

[tlgreg]

1. line-height and few other font/text classes are inherited from parent elements (body) in the docs.
2. The image column's width is defined with a .w-128 which is a custom width and does not exists by default in tailwind.

https://codepen.io/tlgreg/pen/zPZVpK?editors=1100

[adamwathan]

Totally right this example is pretty crappy and rushed; it's been there since long before we started working on the docs for real. Working on a better version now!