Use following code to create a dashboard layout with simple design in top navigation bar.
<div class="relative bg-gray-50 dark:bg-gray-900"> <!--header--> <nav class="border-b lg:border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-transparent py-3.5 px-6 w-full fixed "> <div class="flex items-center justify-between gap-1 sm:gap-6 lg:flex-row flex-col"> <div class="flex justify-between items-center lg:w-auto w-full"> <a href="#" class="block"> <img src="https://pagedone.io/asset/uploads/1701235273.png" alt="Pagedone logo image" class="block dark:hidden"> <img src="https://pagedone.io/asset/uploads/1712310504.png" alt="Pagedone logo image" class="hidden dark:block"> </a> <button id="navbar-toggle" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none " aria-controls="navbar-default" aria-expanded="false"> <span class="sr-only">Open main menu</span> <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> </button> </div> <div id="mobile-navbar" class="hidden lg:flex flex-row w-full flex-1 shadow-sm lg:shadow-none bg-white dark:bg-transparent lg:bg-transparent rounded-xl py-4 lg:py-0"> <ul class="text-center flex lg:flex-row flex-col lg:gap-2 xl:gap-4 gap-2 items-center lg:ml-auto"> <li><a href="#" class="py-1.5 px-3 bg-indigo-600 transition-all duration-500 ease-in-out text-xs text-white font-semibold rounded-md">Dashboard</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Employees</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Attendances</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Calendar</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Leaves</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Payroll</a></li> <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Document</a></li> </ul> <div class="text-center lg:flex items-center gap-1 sm:gap-4 lg:ml-auto"> <div class=" flex items-center lg:justify-start justify-center gap-1 sm:gap-2"> <div class="relative w-max p-3"> <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M17.5001 17.5L15.4167 15.4167M15.8334 9.16667C15.8334 5.48477 12.8486 2.5 9.16673 2.5C5.48483 2.5 2.50006 5.48477 2.50006 9.16667C2.50006 12.8486 5.48483 15.8333 9.16673 15.8333C11.0006 15.8333 12.6615 15.0929 13.8668 13.8947C15.0814 12.6872 15.8334 11.0147 15.8334 9.16667Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path> </svg> </div> <p class="text-gray-200 dark:text-gray-700 font-normal">|</p> <button class="w-8 sm:w-11 h-8 sm:h-11 flex items-center justify-center lg:p-3"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M11.3235 2.5H9.16667C6.02397 2.5 4.45262 2.5 3.47631 3.47631C2.5 4.45262 2.5 6.02397 2.5 9.16667V10.8333C2.5 13.976 2.5 15.5474 3.47631 16.5237C4.45262 17.5 6.02397 17.5 9.16667 17.5H10.8333C13.976 17.5 15.5474 17.5 16.5237 16.5237C17.5 15.5474 17.5 13.976 17.5 10.8333V9.55882M10 10H5.83333M12.5 13.3333H5.83333M17.5 4.58333C17.5 5.73393 16.5673 6.66667 15.4167 6.66667C14.2661 6.66667 13.3333 5.73393 13.3333 4.58333C13.3333 3.43274 14.2661 2.5 15.4167 2.5C16.5673 2.5 17.5 3.43274 17.5 4.58333Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path> </svg> </button> </div> <button class="group py-2 px-2 lg:pr-5 lg:pl-3.5 lg:mx-0 mx-auto flex items-center whitespace-nowrap gap-1.5 font-medium text-sm text-white border border-solid border-indigo-600 bg-indigo-600 rounded-lg transition-all duration-300 hover:bg-indigo-700 hover:border-indigo-700"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M9 4.5V13.5M13.5 9H4.5" stroke="white" stroke-width="1.3" stroke-linecap="round"></path> </svg> <span class="max-lg:hidden">Add Employee</span> </button> </div> </div> </div> </nav> <!--main content--> <div class="pt-[70px]"> <div class="py-4 lg:px-8 px-3 bg-gray-50 dark:bg-gray-900 "> <div class="block max-lg:pl-6"> <h6 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-white whitespace-nowrap mb-1.5"> Welcome back, <span class="text-indigo-600 text-base sm:text-lg font-semibold"> Ronald!</span> </h6> <p class="text-xs font-medium text-gray-900 dark:text-white">Home</p> </div> </div> <div class="w-full p-8 bg-white rounded-3xl "> <div class="border-gray-200 border rounded-xl"> <img src="https://pagedone.io/asset/uploads/1712309277.png" alt="image" class="object-cover w-full h-full"/> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { const navbarToggle = document.getElementById('navbar-toggle'); const mobileNavbar = document.getElementById('mobile-navbar'); navbarToggle.addEventListener('click', function () { mobileNavbar.classList.toggle('hidden'); }); }); </script>
