Tailwind card lists
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 style="font-family:Roboto">
	<div class="w-2/3 h-screen flex items-center mx-auto">
		<div class="p-6 border rounded-t-lg bg-gray-100">
			<div class="flex flex-wrap -mx-2">
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
				<div class="w-1/3 px-2">
					<div class="bg-white px-4 py-4 flex my-2 rounded-lg shadow">
						<div class="w-24 pr-5">
							<a href="#" class="mb-4">
								<img class="rounded" src="/assets/docs/master/image-01.jpg">
            </a>
						</div>
						<div class="flex-1">
							<h2 class="font-bold text-gray-700 my-0">Horizontal Cards are so beautiful.</h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>
© 2019 - 2020 Web2tailwind.com