Appplication Shell with Background

                                        <div class="relative bg-indigo-600 dark:bg-gray-900">
      <!--header-->
      <nav class="py-3.5 px-6 bg-indigo-600 dark:bg-gray-900 border-b border-solid border-indigo-400 dark:border-gray-700 fixed w-full top-0 z-20">
      <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/1712310504.png" alt="Pagedone logo image" >
          </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 lg:bg-transparent rounded-xl py-4 lg:py-0">   
            <ul class="text-center flex lg:flex-row flex-col xl:gap-1 gap-2 lg:ml-auto lg:flex lg:bg-indigo-500 dark:bg-transparent items-center p-1 rounded-xl">
                  <li><a href="#" class="py-2 px-5 flex justify-center bg-white transition-all duration-500 ease-in-out text-xs text-gray-900 font-semibold rounded-lg">Dashboard</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Employees</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Attendances</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Calendar</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Leaves</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Payroll</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">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 gap-1 sm:gap-2 lg:justify-start justify-center">
                  <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="#fff" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  
                  </div>
                  <p class="text-indigo-400 dark:text-gray-700 font-normal">|</p>
                  <button class="w-8 sm:w-11 h-8 sm:h-11 flex items-center justify-center 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="#fff" 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-indigo-600 border border-solid  bg-indigo-50 rounded-lg transition-all duration-300 hover:bg-indigo-100 hover:border-indigo-700">
                  <svg class="stroke-indigo-600" 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="stroke-current" 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="py-3.5 px-8 lg:mt-[72px] mt-[68px] ">
          <div class="block max-lg:pl-6">
              <h6 class="text-sm sm:text-lg font-semibold text-white whitespace-nowrap mb-1.5">
                Welcome back,
                <span class="text-white text-base sm:text-lg font-semibold">
                  Ronald!</span>
              </h6>
              <p class="text-xs font-medium text-white">Home</p>
            </div>
        </div>
        
        <div class=" p-4 ">
          <div class="rounded-2xl bg-white overflow-hidden p-8">
             <div class="border border-gray-200 rounded-2xl">
               <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>