<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100">
<div class="flex">
<!-- Sidebar -->
<div class="w-64 bg-gray-800 text-white h-screen">
<div class="p-6">
<h2 class="text-2xl font-bold">Dashboard</h2>
<nav class="mt-6">
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white">Home</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white">Profile</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white">Messages</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white">Settings</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white">Logout</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col">
<!-- Top Nav -->
<div class="bg-white p-4 shadow-md flex justify-between items-center">
<div>
<input type="text" placeholder="Search..." class="px-4 py-2 border rounded-lg">
</div>
<div class="flex items-center space-x-4">
<span class="text-gray-700">codezillaye</span>
<img src="https://codezillaye.com/img/Content/avatar/avatar1.png" alt="User" class="w-10 h-10 rounded-full">
<div class="relative">
<button class="relative z-10 block rounded-md bg-white focus:outline-none">
<div class="flex items-center">
<span class="text-gray-700">Menu</span>
<svg class="ml-2 h-5 w-5 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 9.293a1 1 0 011.414 0L10 12.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden z-20 hidden">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Settings</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Logout</a>
</div>
</div>
</div>
</div>
<!-- Dashboard Cards -->
<div class="p-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold">Widget 1</h3>
<p class="mt-4">Content for widget 1</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold">Widget 2</h3>
<p class="mt-4">Content for widget 2</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold">Widget 3</h3>
<p class="mt-4">Content for widget 3</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold">Widget 4</h3>
<p class="mt-4">Content for widget 4</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg">
<h3 class="text-lg font-semibold mt-4">Card 1</h3>
<p class="mt-2">Random text for card 1.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-lg">
<h3 class="text-lg font-semibold mt-4">Card 2</h3>
<p class="mt-2">Random text for card 2.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="rounded-lg">
<h3 class="text-lg font-semibold mt-4">Card 3</h3>
<p class="mt-2">Random text for card 3.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="rounded-lg">
<h3 class="text-lg font-semibold mt-4">Card 4</h3>
<p class="mt-2">Random text for card 4.</p>
</div>
</div>
</div>
</div>
<script>
// Toggle the dropdown menu
document.querySelector('.relative button').addEventListener('click', function () {
document.querySelector('.relative div').classList.toggle('hidden');
});
</script>
</body>
</html>