<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note Cards</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-red-400 via-red-500 to-red-600 min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4">
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-white rounded-lg shadow-lg p-6">
<img src="https://picsum.photos/200" alt="Placeholder Image" class="rounded-t-lg w-full">
<h2 class="text-xl font-bold mt-4">Note Title 1</h2>
<p class="mt-2 text-gray-600">This is the content of note 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex justify-end">
<button class="bg-blue-500 text-white py-2 px-4 rounded-lg mr-2 hover:bg-blue-700">Edit</button>
<button class="bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-700">Delete</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<img src="https://picsum.photos/200" alt="Placeholder Image" class="rounded-t-lg w-full">
<h2 class="text-xl font-bold mt-4">Note Title 2</h2>
<p class="mt-2 text-gray-600">This is the content of note 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex justify-end">
<button class="bg-blue-500 text-white py-2 px-4 rounded-lg mr-2 hover:bg-blue-700">Edit</button>
<button class="bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-700">Delete</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<img src="https://picsum.photos/200" alt="Placeholder Image" class="rounded-t-lg w-full">
<h2 class="text-xl font-bold mt-4">Note Title 3</h2>
<p class="mt-2 text-gray-600">This is the content of note 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex justify-end">
<button class="bg-blue-500 text-white py-2 px-4 rounded-lg mr-2 hover:bg-blue-700">Edit</button>
<button class="bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-700">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>