index

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-ui/4.12.4/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-symbols@0.32.0/index.min.css">

<header class="mx-auto bg-white min-w-screen ">
  <div class="grid grid-cols-3 w-full gap-0 items-center">
    <!-- Navigation icon -->
    <div class="grid justify-self-start">
      <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors">
        <span class="material-symbols-outlined text-2xl">menu</span>
      </button>
    </div>

    <!-- Title -->
    <div class="grid justify-self-center">
      <h1 class="text-3xl font-bold">Material M3</h1>
    </div>

    <!-- Action icons -->
    <div class="grid justify-self-end grid-flow-col gap-2">
      <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors">
        <span class="material-symbols-outlined text-2xl">search</span>
      </button>
      <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors">
        <span class="material-symbols-outlined text-2xl">favorite</span>
      </button>
      <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors">
        <span class="material-symbols-outlined text-2xl">account_circle</span>
      </button>
    </div>
  </div>
</header>