Footer

<footer class="@container">
  <div class="px-4 py-5 @desktop:px-8">
    <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Return to top</a>
  </div>
  <div class="bg-gray-5 grid @tablet:grid-cols-3 gap-x-4">
    <nav
      aria-label="Footer navigation" class="@tablet:col-span-2 @mobile-lg:py-8 @mobile-lg:px-4 @desktop:px-8 border-b @tablet:border-b-0 border-b-gray-30">

      {# Mobile #}
      <div x-accordion class="@mobile-lg:hidden @desktop:gap-x-8 divide-y @mobile-lg:divide-y-0 divide-gray-30 border-t @mobile-lg:border-t-0 border-t-gray-30">
        {% for i in 0..3 %}
          <section x-accordion:item>
            <h4 class="relative font-bold font-merriweather">
              <button x-accordion:trigger class="group flex items-center w-full p-4 bg-gray-5 font-bold focus:outline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v cursor-pointer text-left gap-2">
                <div class="size-6 icon-[material-symbols--chevron-right] group-aria-expanded:icon-[material-symbols--expand-more]"></div>
                Topic
              </button>
            </h4>
            <div x-accordion:content>
              <ul class="space-y-4 px-4 pb-6 pt-3">
                <li>
                  <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
                </li>
                <li>
                  <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
                </li>
                <li>
                  <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
                </li>
                <li>
                  <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
                </li>
              </ul>
            </div>
          </section>
        {% endfor %}
      </div>

      {# Mobile LG & Up #}
      <div class="hidden @mobile-lg:grid @mobile-lg:grid-cols-2 @desktop:grid-cols-4 gap-x-4 gap-y-8">
        {% for i in 0..3 %}
          <section>
            <h4 class="font-bold font-merriweather mb-4">Topic</h4>
            <ul class="space-y-4">
              <li>
                <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
              </li>
              <li>
                <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
              </li>
              <li>
                <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
              </li>
              <li>
                <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Secondary link</a>
              </li>
            </ul>
          </section>
        {% endfor %}
      </div>
    </nav>
    <div class="py-8 px-4 @desktop:px-8">
      <h3 class="text-lg font-bold font-merriweather">Sign Up</h3>
      <div class="max-w-xs mt-3">
        <label for="email" class="block">Your email address</label>
        <div class="mt-2 relative">
          <input id="email" type="email" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
        </div>
      </div>
      <div class="mt-4 @mobile-lg:mt-6">
        <button class="w-full @mobile-lg:w-auto rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Sign Up</button>
      </div>
    </div>
  </div>
  <div class="bg-gray-10 px-4 @desktop:px-8 py-5">
    <div class="grid @mobile-lg:grid-cols-2 gap-y-8 gap-x-4">
      <div class="flex flex-wrap flex-col @mobile-lg:flex-row @mobile-lg:items-center gap-4">
        <div>
          <img src="" alt="" class="bg-white size-20 rounded-full object-cover">
        </div>
        <div>
          <p class="text-xl font-bold">Name of agency</p>
        </div>
      </div>
      <div class="@mobile-lg:text-right grow space-y-3">
        <div class="flex flex-wrap @mobile-lg:justify-end gap-2">
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--facebook] size-full"></div>
              <span class="sr-only">Facebook</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--twitter] size-full"></div>
              <span class="sr-only">Twitter</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--youtube] size-full"></div>
              <span class="sr-only">YouTube</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--instagram] size-full"></div>
              <span class="sr-only">Instagram</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[material-symbols--rss-feed] size-full"></div>
              <span class="sr-only">RSS</span>
            </a>
          </div>
        </div>
        <p class="text-xl font-bold">Agency Contact Center</p>
        <address class="flex flex-wrap @mobile-lg:justify-end gap-x-4 @desktop:gap-x-8">
          <div class="leading-tighter">
            <a href="tel:1-800-555-5555" class="text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">(800) 555-GOVT
            </a>
          </div>
          <div class="leading-tighter">
            <a href="mailto:info@agency.gov" class="text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">info@agency.gov
            </a>
          </div>
        </address>
      </div>
    </div>
  </div>
</footer>

<footer class="@container">
  <div class="px-4 py-5 @desktop:px-8">
    <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Return to top</a>
  </div>
  <nav class="bg-gray-5 @desktop:px-4">
    <ul class="flex flex-col @mobile-lg:flex-row flex-wrap divide-y @mobile-lg:divide-y-0 divide-y-gray-30 border-y @mobile-lg:border-y-0 border-y-gray-30">
      <li class="@mobile-lg:w-1/3 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/3 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/3 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/3 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
    </ul>
  </nav>
  <div class="bg-gray-10 px-4 @desktop:px-8 py-5">
    <div class="grid @mobile-lg:grid-cols-2 gap-y-8 gap-x-4">
      <div class="flex flex-wrap flex-col @mobile-lg:flex-row @mobile-lg:items-center gap-4">
        <div>
          <img src="" alt="" class="bg-white size-20 rounded-full object-cover">
        </div>
        <div>
          <p class="text-xl font-bold">Name of agency</p>
        </div>
      </div>
      <div class="@mobile-lg:text-right grow space-y-3">
        <div class="flex flex-wrap @mobile-lg:justify-end gap-2">
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--facebook] size-full"></div>
              <span class="sr-only">Facebook</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--twitter] size-full"></div>
              <span class="sr-only">Twitter</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--youtube] size-full"></div>
              <span class="sr-only">YouTube</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[fa6-brands--instagram] size-full"></div>
              <span class="sr-only">Instagram</span>
            </a>
          </div>
          <div>
            <a href="" class="block text-gray-90 size-12 p-2 bg-black/10 hover:bg-white focus:outline focus:outline-4 focus:outline-blue-40v">
              <div class="icon-[material-symbols--rss-feed] size-full"></div>
              <span class="sr-only">RSS</span>
            </a>
          </div>
        </div>
        <p class="text-xl font-bold">Agency Contact Center</p>
        <address class="flex flex-wrap @mobile-lg:justify-end gap-x-4 @desktop:gap-x-8">
          <div class="leading-tighter">
            <a href="tel:1-800-555-5555" class="text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">(800) 555-GOVT
            </a>
          </div>
          <div class="leading-tighter">
            <a href="mailto:info@agency.gov" class="text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">info@agency.gov
            </a>
          </div>
        </address>
      </div>
    </div>
  </div>
</footer>

<footer class="@container">
  <div class="px-4 py-5 @desktop:px-8">
    <a href="#" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Return to top</a>
  </div>
  <nav class="bg-gray-5 @desktop:px-4 grid @mobile-lg:grid-cols-3">
    <ul class="flex flex-wrap @mobile-lg:col-span-2 flex-col @mobile-lg:flex-row divide-y @mobile-lg:divide-y-0 divide-y-gray-30 border-y @mobile-lg:border-y-0 border-y-gray-30">
      <li class="@mobile-lg:w-1/2 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/2 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/2 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
      <li class="@mobile-lg:w-1/2 @desktop:w-auto">
        <a href="#" class="block p-4 font-bold text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">Primary link</a>
      </li>
    </ul>
    <address class="flex flex-wrap p-4 @mobile-lg:p-0 gap-x-8 @mobile-lg:gap-x-0">
      <div class="w-auto @mobile-lg:w-full @desktop:p-4 leading-tighter">
        <a href="tel:1-800-555-5555" class="@mobile-lg:block @mobile-lg:p-4 @desktop:p-0 @desktop:inline text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">(800) 555-GOVT
        </a>
      </div>
      <div class="w-auto @mobile-lg:w-full @desktop:p-4 leading-tighter">
        <a href="mailto:info@agency.gov" class="@mobile-lg:block @mobile-lg:p-4 @desktop:p-0 @desktop:inline text-gray-90 visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">info@agency.gov
        </a>
      </div>
    </address>
  </nav>
  <div class="bg-gray-10 px-4 @desktop:px-8 py-5">
    <div class="flex flex-wrap @mobile-lg:items-center @mobile-lg:justify-between gap-4">
      <img src="" alt="" class="bg-white size-12 rounded-full object-cover">
      <p class="text-xl font-bold">Agency Contact Center</p>
    </div>
  </div>
</footer>