Responsive Card Example

<!doctype html>
<title>Tailwind CSS Responsive Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8">

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="/pix/samples/22l.jpg" alt="Beach and nature">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
        <a href="##" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
        <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy some fresh air and sunshine? We've got a selection of the best places in the world.</p>
      </div>
    </div>
  </div>

<div class="mt-8 text-center text-sm text-gray-500">
    <p class="block sm:hidden">Current breakpoint: <span class="font-bold text-red-600">Base (< 640px)</span></p>
    <p class="hidden sm:block md:hidden">Current breakpoint: <span class="font-bold text-orange-600">sm (≥ 640px)</span></p>
    <p class="hidden md:block lg:hidden">Current breakpoint: <span class="font-bold text-green-600">md (≥ 768px)</span></p>
    <p class="hidden lg:block xl:hidden">Current breakpoint: <span class="font-bold text-blue-600">lg (≥ 1024px)</span></p>
    <p class="hidden xl:block 2xl:hidden">Current breakpoint: <span class="font-bold text-purple-600">xl (≥ 1280px)</span></p>
    <p class="hidden 2xl:block">Current breakpoint: <span class="font-bold text-pink-600">2xl (≥ 1536px)</span></p>
    <p class="mt-2 text-xs italic">(Resize your browser or the preview window to see themes change)</p>
  </div>

</body>