Footer Nine

<footer
  class="bg-white pb-10 pt-4 sm:pt-10 sm:pb-10 sm:py-10 lg:pt-12 lg:pb-12 lg:py-12"
>
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <div
      class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 lg:grid-rows-2 gap-12 border-t pt-10 lg:gap-8 lg:pt-12"
    >
      <div class="col-span-full lg:col-span-1 lg:row-span-2">
        <img
          class="max-w-full w-40 h-max object-center mb-4"
          src="https://tailsections.com/logo.png"
        />
        <p class="text-sm text-gray-500">
          &#xa9; 2022 - 2025 tailsections.com. Crafted with care for developers
          worldwide.
        </p>
      </div>
      <div class>
        <div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
          Offerings
        </div>
        <nav class="flex flex-col gap-4">
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Features
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Integrations
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Subscriptions
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Success Stories
            </a>
          </div>
        </nav>
      </div>
      <div class>
        <div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
          About Us
        </div>
        <nav class="flex flex-col gap-4">
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Our Mission
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Leadership
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Careers
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Newsroom
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Insights
            </a>
          </div>
        </nav>
      </div>
      <div class>
        <div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
          Help Center
        </div>
        <nav class="flex flex-col gap-4">
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Support Desk
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              API Guides
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Live Chat
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Troubleshooting
            </a>
          </div>
        </nav>
      </div>
      <div class>
        <div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
          Policies
        </div>
        <nav class="flex flex-col gap-4">
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              User Agreement
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Data Usage
            </a>
          </div>
          <div class>
            <a
              href="#"
              class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
            >
              Cookie Preferences
            </a>
          </div>
        </nav>
      </div>
    </div>
  </div>
</footer>