<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note Taking App</title>
<script src="[Link]
<link rel="stylesheet" href="[Link]
awesome/5.15.3/css/[Link]"></link>
<link href="[Link]
family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<header class="flex justify-between items-center py-4">
<h1 class="text-3xl font-bold text-gray-800">Note Taking App</h1>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-
600">
<i class="fas fa-plus"></i> Add Note
</button>
</header>
<main>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
1</h2>
<p class="text-gray-600 mt-2">This is the content of note 1. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
2</h2>
<p class="text-gray-600 mt-2">This is the content of note 2. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
3</h2>
<p class="text-gray-600 mt-2">This is the content of note 3. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
4</h2>
<p class="text-gray-600 mt-2">This is the content of note 4. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
5</h2>
<p class="text-gray-600 mt-2">This is the content of note 5. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
6</h2>
<p class="text-gray-600 mt-2">This is the content of note 6. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
7</h2>
<p class="text-gray-600 mt-2">This is the content of note 7. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
8</h2>
<p class="text-gray-600 mt-2">This is the content of note 8. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
9</h2>
<p class="text-gray-600 mt-2">This is the content of note 9. It
contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
10</h2>
<p class="text-gray-600 mt-2">This is the content of note 10.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
11</h2>
<p class="text-gray-600 mt-2">This is the content of note 11.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
12</h2>
<p class="text-gray-600 mt-2">This is the content of note 12.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
13</h2>
<p class="text-gray-600 mt-2">This is the content of note 13.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
14</h2>
<p class="text-gray-600 mt-2">This is the content of note 14.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold text-gray-800">Note Title
15</h2>
<p class="text-gray-600 mt-2">This is the content of note 15.
It contains some brief information about the note.</p>
<div class="flex justify-end mt-4">
<button class="text-blue-500 hover:text-blue-600 mr-2">
<i class="fas fa-edit"></i> Edit
</button>
<button class="text-red-500 hover:text-red-600">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>