@sujalchoudhari/solaris-ui/templates/header.html

A UI framework to create HTML pages with just JavaScript.

<header class="p-4 dark:bg-gray-800 dark:text-gray-100">
	<div class="container flex justify-between h-16 mx-auto">
		<a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
			<img class="w-8 h-8 dark:text-yellow-400" src="{{imgUrl}}" alt="{{imgAlt}}">
            <h1 class="mx-4 text-lg font-bold">Name</h1>
		</a>
		<ul class="items-stretch hidden space-x-3 md:flex">
            {{#links}}
			<li class="flex">
				<a rel="noopener noreferrer" href="{{link}}" class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent">{{title}}</a>
			</li>
			{{/links}}
		</ul>
		<button id="header-collapse" class="flex justify-end p-4 md:hidden">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
			</svg>
		</button>
	</div>
</header>