Navbar

<nav class="bg-white  navbar-expand">
<div class="flex flex-wrap items-center justify-between p-4">
	 <a href="https://codescandy.com/" class="flex items-center space-x-3">
	 <img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Codescandy Logo" />
	 </a>
	 <button
			data-bs-toggle="collapse"
			type="button"
			class="navbar-toggler inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
			data-bs-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent"
			aria-expanded="false"
			aria-label="Toggle navigation"
			>
			<span class="sr-only">Menu</span>
			<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
				 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
			</svg>
	 </button>
	 <div class="w-full lg:block lg:w-auto collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="ml-auto font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
				 <li>
						<a href="#" class="block py-2 px-3 text-white bg-indigo-700 rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
				 </li>
				 <li>
						<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">About</a>
				 </li>
				 <li>
						<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Services</a>
				 </li>
				 <li>
						<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Pricing</a>
				 </li>
				 <li>
						<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Contact</a>
				 </li>
			</ul>
	 </div>
 </div>
</nav>

	<nav class="bg-white  navbar-expand">
	<div class="flex flex-wrap items-center justify-between p-4">
		<a href="https://codescandy.com/" class="flex items-center space-x-3">
			<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Codescandy Logo" />
		</a>
		<button
			data-bs-toggle="collapse"
			type="button"
			class="navbar-toggler inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
			data-bs-target="#navbarSupportedContentLeft"
			aria-controls="navbarSupportedContentLeft"
			aria-expanded="false"
			aria-label="Toggle navigation"
		>
			<span class="sr-only">Menu</span>
			<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
				<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
			</svg>
		</button>
		<div class="w-full lg:block lg:w-auto collapse navbar-collapse" id="navbarSupportedContentLeft">
			<ul class="lg:ml-10 font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
				<li>
					<a href="#" class="block py-2 px-3 text-white bg-indigo-700 rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">About</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Services</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Pricing</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Contact</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<nav class="bg-white  navbar-expand">
	<div class="flex flex-wrap items-center justify-between p-4">
		<a href="https://codescandy.com/" class="flex items-center space-x-3">
			<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Codescandy Logo" />
		</a>
		<div class="flex md:order-2 space-x-3 md:space-x-0">
			<button
				type="button"
				class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
			>
				Button
			</button>
			<button
				data-bs-toggle="collapse"
				type="button"
				class="navbar-toggler inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
				data-bs-target="#navbarSupportedContentCenter"
				aria-controls="navbarSupportedContentCenter"
				aria-expanded="false"
				aria-label="Toggle navigation"
			>
				<span class="sr-only">Menu</span>
				<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
					<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
				</svg>
			</button>
		</div>
		<div class="w-full lg:block lg:w-auto collapse navbar-collapse" id="navbarSupportedContentCenter">
			<ul class="mx-auto font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
				<li>
					<a href="#" class="block py-2 px-3 text-white bg-indigo-700 rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">About</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Services</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Pricing</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-800 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Contact</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

			<header class="bg-gray-900 navbar-expand">
<nav class="flex flex-wrap items-center justify-between p-4">
		<a href="https://codescandy.com/" class="flex items-center space-x-3">
			<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Codescandy Logo" />
		</a>
		<button
			data-bs-toggle="collapse"
			type="button"
			class="navbar-toggler inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
			data-bs-target="#navbarSupportedContentColorVarient"
			aria-controls="navbarSupportedContentColorVarient"
			aria-expanded="false"
			aria-label="Toggle navigation"
		>
			<span class="sr-only">Menu</span>
			<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
				<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
			</svg>
		</button>
		<div class="w-full lg:block lg:w-auto collapse navbar-collapse" id="navbarSupportedContentColorVarient">
			<ul
				class="lg:ml-auto font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-800 rounded-lg bg-gray-800 lg:bg-transparent lg:flex-row lg:space-x-8 lg:mt-0 lg:border-0"
			>
				<li>
					<a href="#" class="block py-2 px-3 text-white bg-indigo-700 rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-500 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">About</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-500 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Services</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-500 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Pricing</a>
				</li>
				<li>
					<a href="#" class="block py-2 px-3 text-gray-500 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700 lg:p-0">Contact</a>
				</li>
			</ul>
		</div>
	</nav>
	</header>