1
<header class="justify-center w-full mx-auto bg-zinc-50"> <!-- Banner Section --> <div class="flex items-center justify-center px-8 py-2 text-white lg:h-12 bg-gradient-to-b from-blue-500 to-blue-600" > <div class="flex flex-col justify-center lg:flex-row lg:items-center gap-4"> <div class="text-xs font-medium"> <span class="text-sm font-medium text-white"> We have launched a new version of Oxbow UI </span> </div> <div class="hidden w-px h-6 lg:block bg-white/20"></div> <div> <a class="text-sm flex items-center font-medium text-white hover:text-blue-200 gap-2" href="#_" > Talk to sales <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler-chevron-right size-4" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M9 6l6 6l-6 6"></path> </svg> </a> </div> </div> </div> <!-- Navigation Section with Alpine.js State Management --> <div x-data="{ open: false }" class="relative flex flex-col w-full px-8 py-2 mx-auto md:px-12 md:items-center md:justify-between md:flex-row lg:px-24 max-w-screen-xl" > <div class="flex flex-row items-center justify-between text-black"> <!-- Logo Section --> <a class="text-base flex items-center font-medium hover:text-blue-500 gap-2 text-zinc-900" href="#_" > <img class="h-7 2xl:h-12" src="/images/oxbow/blueLineLogo.png" alt="#_" /> Oxbow UI </a> <button class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-black bg-white hover:bg-zinc-100 focus:outline-zinc-900 size-9 p-2 text-sm rounded-md md:hidden" @click="open = !open" :aria-expanded="open" aria-controls="main-nav" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler-layout-grid size-3" x-data="{ open: false }" > <!-- Paths for burger icon --> <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" ></path> <!-- Paths for close icon (toggle icon) --> <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" ></path> </svg> </button> </div> <!-- Navigation Menu --> <nav id="main-nav" :class="{ 'flex': open, 'hidden': !open }" class="flex-col items-center flex-grow hidden p-4 px-5 gap-3 md:px-0 md:pb-0 md:flex md:justify-start md:flex-row lg:p-0" > <button class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md md:ml-auto" > Button </button> </nav> </div> </header>
<header class="justify-center w-full mx-auto bg-zinc-50">
<!-- Banner Section -->
<div
class="flex items-center justify-center px-8 py-2 text-white lg:h-12 bg-gradient-to-b from-blue-500 to-blue-600"
>
<div class="flex flex-col justify-center lg:flex-row lg:items-center gap-4">
<div class="text-xs font-medium">
<span class="text-sm font-medium text-white">
We have launched a new version of Oxbow UI
</span>
</div>
<div class="hidden w-px h-6 lg:block bg-white/20"></div>
<div>
<a
class="text-sm flex items-center font-medium text-white hover:text-blue-200 gap-2"
href="#_"
>
Talk to sales
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-chevron-right size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Navigation Section with Alpine.js State Management -->
<div
x-data="{ open: false }"
class="relative flex flex-col w-full px-8 py-2 mx-auto md:px-12 md:items-center md:justify-between md:flex-row lg:px-24 max-w-screen-xl"
>
<div class="flex flex-row items-center justify-between text-black">
<!-- Logo Section -->
<a
class="text-base flex items-center font-medium hover:text-blue-500 gap-2 text-zinc-900"
href="#_"
>
<img
class="h-7 2xl:h-12"
src="/images/oxbow/blueLineLogo.png"
alt="#_"
/>
Oxbow UI
</a>
<button
class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-black bg-white hover:bg-zinc-100 focus:outline-zinc-900 size-9 p-2 text-sm rounded-md md:hidden"
@click="open = !open"
:aria-expanded="open"
aria-controls="main-nav"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-grid size-3"
x-data="{ open: false }"
>
<!-- Paths for burger icon -->
<path
x-show="!open"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
<!-- Paths for close icon (toggle icon) -->
<path
x-show="open"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Navigation Menu -->
<nav
id="main-nav"
:class="{ 'flex': open, 'hidden': !open }"
class="flex-col items-center flex-grow hidden p-4 px-5 gap-3 md:px-0 md:pb-0 md:flex md:justify-start md:flex-row lg:p-0"
>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md md:ml-auto"
>
Button
</button>
</nav>
</div>
</header>