From 88014ba2de1eda4610f6114b716d959eb062392e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 1 Nov 2017 08:16:04 -0400
Subject: [PATCH] Tweak contact card example on intro page

---
 docs/source/docs/what-is-tailwind.blade.md | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md
index ff1bd95e6..ca93a0b35 100644
--- a/docs/source/docs/what-is-tailwind.blade.md
+++ b/docs/source/docs/what-is-tailwind.blade.md
@@ -31,11 +31,9 @@ Here's an example of a contact card component built with Tailwind without writin
 
 @component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
 <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
-    <div class="flex items-center px-6 py-4">
-        <div class="mr-4">
-            <img class="h-24 rounded-full" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
-        </div>
-        <div class="flex-grow">
+    <div class="sm:flex sm:items-center px-6 py-4">
+        <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+        <div class="text-center sm:text-left sm:flex-grow">
             <div class="mb-4">
                 <p class="text-xl leading-tight">Adam Wathan</p>
                 <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
@@ -48,16 +46,16 @@ Here's an example of a contact card component built with Tailwind without writin
 </div>
 @slot('code')
 <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
-    <div class="flex items-center px-6 py-4">
-        <div class="mr-4">
-            <img class="h-24 rounded-full" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
-        </div>
-        <div>
+    <div class="sm:flex sm:items-center px-6 py-4">
+        <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+        <div class="text-center sm:text-left sm:flex-grow">
             <div class="mb-4">
-                <p class="text-xl leading-tight text-black">Adam Wathan</p>
+                <p class="text-xl leading-tight">Adam Wathan</p>
                 <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
             </div>
-            <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+            <div>
+                <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+            </div>
         </div>
     </div>
 </div>