Improve the horizontal card example implementation so it's not as trash

Author: adamwathan

docs/source/docs/examples/cards.blade.md

@@ -28,14 +28,15 @@ description: null
 ## Horizontal
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
-<div class="max-w-md flex">
-  <div class="rounded rounded-l w-128 text-center overflow-hidden">
-    <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
+<div class="max-w-md w-full lg:flex">
+  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded rounded-t lg:rounded lg:rounded-l text-center overflow-hidden" style="background-image: url('https://tailwindcss.com/img/card-left.jpg')" title="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>
+  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded rounded-b lg:rounded lg:rounded-r p-4 flex flex-col justify-between leading-normal">
+    <div class="mb-8">
       <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>
+        <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>