<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/main.css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-zinc-900">
  <header class="flex flex-row items-center px-4 py-2 bg-zinc-700">
    <div class="flex-shrink">
      <a href="/">
        <h1 class="m-2 text-2xl font-bold text-zinc-300">yam</h1>
      </a>
    </div>
    <div class="flex-1 px-4">
      <input class="w-full py-2 pl-4 pr-10 bg-transparent border rounded-full text-zinc-100 bg-zinc-800 focus:bg-zinc-900 focus:outline-none border-zinc-500" type="text" placeholder="Search for item..." />
    </div>
  </header>
  <%-body%>

</body>

</html>