Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Style a material design card component with Tailwind CSS
<!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>
@w3collective
Copy link
Author

w3collective commented Mar 2, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment