Skip to content

Instantly share code, notes, and snippets.

@Kasun002

Kasun002/dashboard.html

Created August 20, 2023 23:26
Show Gist options
  • Save Kasun002/82e7183e084242584b73d5014704e249 to your computer and use it in GitHub Desktop.
Save Kasun002/82e7183e084242584b73d5014704e249 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive dashboard layout using tailwind css and JS. This dashboard layout contains side-bar and header mainly inside the middle container we can load any content dynamically.
Raw
dashboard.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body class="bg-gray-100">
<!-- Sidebar -->
<aside
class="bg-gray-800 text-white w-16 min-h-screen fixed top-0 left-0 transition-transform duration-300 transform -translate-x-full lg:translate-x-0 lg:w-64 z-10">
<!-- Mobile Burger Menu Button -->
<button id="toggleSidebar" class="lg:hidden fixed top-4 right-4 z-20 bg-white p-2 rounded-md shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Sidebar Content -->
<ul class="mt-10 space-y-4">
<!-- Sidebar items go here -->
<li><a href="#" class="block p-2">Dashboard</a></li>
<li><a href="#" class="block p-2">Reports</a></li>
<li><a href="#" class="block p-2">Analytics</a></li>
<li><a href="#" class="block p-2">Settings</a></li>
</ul>
</aside>
<!-- Page Content -->
<main class="lg:ml-16 lg:ml-64">
<!-- Sticky Header -->
<header class="bg-white shadow-lg p-4 lg:px-8 lg:py-4 lg:sticky lg:top-0 lg:z-20 flex justify-between">
<div class="flex items-center">
<!-- Left: Search Bar -->
<div class="w-1/2">
<input type="text" class="w-full border rounded p-2" placeholder="Search Items for your use...">
</div>
</div>
<div class="flex items-center mt-4 lg:mt-0">
<!-- Right: Notifications -->
<div class="ml-4 lg:ml-0">
<button class="bg-blue-500 text-white rounded p-2 hover:bg-blue-600">Notifications</button>
</div>
</div>
</header>
<!-- Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4">
<!-- Tiles -->
<div class="bg-white rounded-lg shadow p-4">
<!-- Tile content goes here -->
<h2 class="text-xl font-semibold">Tile 1</h2>
<p>This is some content for Tile 1.</p>
</div>
<!-- Table -->
<div class="bg-white rounded-lg shadow p-4">
<!-- Table content goes here -->
<h2 class="text-xl font-semibold">Table</h2>
<table class="min-w-full border-collapse table-auto">
<thead>
<tr>
<th class="px-6 py-3 bg-gray-100 text-left">Name</th>
<th class="px-6 py-3 bg-gray-100 text-left">Email</th>
<th class="px-6 py-3 bg-gray-100 text-left">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">John Doe</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">[email protected]</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">Admin</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">Jane Smith</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">[email protected]</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">User</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">Bob Johnson</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">[email protected]</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">User</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</div>
</main>
<!-- JavaScript to toggle sidebar on small screens -->
<script>
const sidebar = document.querySelector('aside');
const toggleButton = document.querySelector('#toggleSidebar');
toggleButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment