w3collective/tailwind-card-component.html

## tailwind-card-component.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style a material design card component with Tailwind CSS</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
  </head>
  <body class="p-4 pt-16 bg-gray-200">
    <div class="bg-white rounded shadow max-w-md mx-auto">
      <header class="p-4">
        <img src="http://lorempixel.com/64/64/nature/5/" class="float-left rounded-full w-10 h-10 m-1 mr-3" />
        <h3 class="text-lg font-bold">Island Holiday Escape</h3>
        <p class="text-sm text-gray-600">5 nights (inc flights) from $1999</p>
      </header>
      <section>
        <img src="http://lorempixel.com/700/450/nature/5/" />
        <p class="text-sm text-gray-600 p-4">Omnis consectetur voluptatem labore aut et vel itaque recusandae. Et molestiae iure qui et nihil minus nes ciunt.</p>
      </section>
      <footer class="p-4">
        <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline mr-3">Book Online</a>
        <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline">More Info</a>
        <a href="#" class="float-right"><img src="https://img.icons8.com/flat_round/24/000000/share--v1.png"/></a>
        <a href="#" class="float-right mr-3"><img src="https://img.icons8.com/flat_round/24/000000/hearts.png"/></a>
      </footer>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Style a material design card component with Tailwind CSS</title>
	<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
	</head>
	<body class="p-4 pt-16 bg-gray-200">
	<div class="bg-white rounded shadow max-w-md mx-auto">
	<header class="p-4">
	<img src="http://lorempixel.com/64/64/nature/5/" class="float-left rounded-full w-10 h-10 m-1 mr-3" />
	<h3 class="text-lg font-bold">Island Holiday Escape</h3>
	<p class="text-sm text-gray-600">5 nights (inc flights) from $1999</p>
	</header>
	<section>
	<img src="http://lorempixel.com/700/450/nature/5/" />
	<p class="text-sm text-gray-600 p-4">Omnis consectetur voluptatem labore aut et vel itaque recusandae. Et molestiae iure qui et nihil minus nes ciunt.</p>
	</section>
	<footer class="p-4">
	<a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline mr-3">Book Online</a>
	<a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline">More Info</a>
	<a href="#" class="float-right"><img src="https://img.icons8.com/flat_round/24/000000/share--v1.png"/></a>
	<a href="#" class="float-right mr-3"><img src="https://img.icons8.com/flat_round/24/000000/hearts.png"/></a>
	</footer>
	</div>
	</body>
	</html>