Vertical Card
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
	<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto&display=swap" rel="stylesheet">
</head>

<body class="bg-gray-300" style="font-family:Roboto">
	<div class="w-2/3 h-screen mx-auto flex items-center">
		<div class="px-1">
			<div class="max-w-sm bg-white rounded-lg overflow-hidden shadow-lg">
				<img class="w-full" src="/assets/docs/master/image-01.jpg" alt="Sunset in the mountains">
				<div class="px-6 py-4">
					<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
					<p class="text-gray-700 text-base">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
						perferendis eaque, exercitationem praesentium nihil.
					</p>
				</div>
				<div class="px-6 py-4">
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
				</div>
			</div>
		</div>
		<div class="px-1">
			<div class="max-w-sm bg-white rounded-lg overflow-hidden shadow-lg">
				<img class="w-full" src="/assets/docs/master/image-01.jpg" alt="Sunset in the mountains">
				<div class="px-6 py-4">
					<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
					<p class="text-gray-700 text-base">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
						perferendis eaque, exercitationem praesentium nihil.
					</p>
				</div>
				<div class="px-6 py-4">
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
					<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
© 2019 - 2020 Web2tailwind.com