Navbar

<nav flowbiteNavbar>
  <a
    flowbiteNavbarBrand
    href="#">
    <span class="sr-only">Open navbar</span>
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      class="h-8"
      alt="Flowbite Logo" />
    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
      Flowbite
    </span>
  </a>
  <button flowbiteNavbarToggle>
    <flowbite-icon
      name="bars"
      class="size-5 stroke-2" />
  </button>
  <div flowbiteNavbarContent>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Home
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        About
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Services
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Pricing
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Contact
      </a>
    </li>
  </div>
</nav>

<div class="p-4">
  <div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
    @for (i of [0, 1]; track $index) {
      <div class="mb-4 grid grid-cols-3 gap-4">
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
      </div>
      <div
        class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
        <p class="text-2xl text-gray-400 dark:text-gray-500">
          <svg
            class="h-3.5 w-3.5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 18 18">
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 1v16M1 9h16"></path>
          </svg>
        </p>
      </div>
    }
  </div>
</div>