Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Sidebar With Icons</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex min-h-screen"> <aside class="w-64 bg-white border-r border-gray-200 flex flex-col"> <div class="px-6 py-10"> <div class="h-8 w-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">I</div> </div> <nav class="flex-1 px-4 space-y-2"> <a href="##" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-blue-600 bg-blue-50 font-bold transition-all"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg> <span>Home</span> </a> <a href="##" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-gray-50 transition-all font-medium"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg> <span>Users</span> </a> <a href="##" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-gray-50 transition-all font-medium"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg> <span>Inventory</span> </a> <a href="##" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-gray-50 transition-all font-medium"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg> <span>Reports</span> </a> </nav> </aside> <main class="flex-1 p-10 bg-white"> <h1 class="text-3xl font-bold text-gray-900">Icon Navigation</h1> <p class="mt-4 text-gray-600">Visual cues provided by icons help users quickly identify the different sections of the application.</p> </main> </body> </html>
