lib/chai_web/components/layouts/app.html.heex

<header class="px-4 sm:px-6 lg:px-8">
  <div class="flex items-center justify-between border-b border-zinc-100 py-3">
    <div class="flex items-center gap-4">
      <a href={~p"/"}>
        <img src={~s"/logo.svg"} class="h-8" />
      </a>
    </div>
    <div class="flex items-center gap-4">
      <a
        href="https://huggingface.co/spaces/jonatanklosko/chai/tree/main"
        target="_blank"
        class="text-[0.8125rem] font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
      >
        Source
      </a>
      <a
        href="https://huggingface.co/spaces/jonatanklosko/chai/blob/main/README.md"
        target="_blank"
        class="rounded-lg bg-zinc-100 px-2 py-1 text-[0.8125rem] font-semibold leading-6 text-zinc-900 hover:bg-zinc-200/80 active:text-zinc-900/70"
      >
        Learn more <span aria-hidden="true">&rarr;</span>
      </a>
    </div>
  </div>
</header>
<main class="py-4 px-4 sm:px-6 lg:px-8">
  <div class="m-auto max-w-2xl">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>