Footer Two

<footer class="body-font text-gray-600">
  <div
    class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto flex flex-wrap flex-col max-w-screen-2xl md:items-center md:flex-row md:flex-nowrap lg:items-start"
  >
    <div
      class="flex-shrink-0 w-64 ml-auto mr-auto mx-auto text-center mt-10 md:ml-0 md:mr-0 md:mx-0 md:text-left md:mt-0"
    >
      <img
        class="max-w-full w-40 h-max object-center"
        src="https://tailsections.com/logo.png"
      />
      <p class="mt-2 text-sm text-gray-500">
        Modular UI components built to streamline your product launch process.
      </p>
    </div>
    <div
      class="flex-grow -mb-10 order-first flex flex-wrap text-center md:pr-20 md:text-left"
    >
      <div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
        >
          SOLUTIONS
        </h2>
        <nav class="list-none mb-10">
          <li class>
            <a class="text-gray-600 hover:text-gray-800">
              Marketing Automation
            </a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Customer Insights</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">
              Personalization Tools
            </a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Sales Enablement</a>
          </li>
        </nav>
      </div>
      <div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
        >
          RESOURCES
        </h2>
        <nav class="list-none mb-10">
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Documentation</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">API Reference</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">System Status</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Community Forum</a>
          </li>
        </nav>
      </div>
      <div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
        >
          COMPANY
        </h2>
        <nav class="list-none mb-10">
          <li class>
            <a class="text-gray-600 hover:text-gray-800">About Us</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Press Kit</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Investor Relations</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Sustainability</a>
          </li>
        </nav>
      </div>
      <div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
        >
          SUPPORT
        </h2>
        <nav class="list-none mb-10">
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Help Center</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Live Chat</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Product Updates</a>
          </li>
          <li class>
            <a class="text-gray-600 hover:text-gray-800">Service Level</a>
          </li>
        </nav>
      </div>
    </div>
  </div>
  <div class="bg-gray-100">
    <div
      class="container ml-auto mr-auto mx-auto pt-4 pb-4 py-4 pl-5 pr-5 px-5 flex flex-wrap flex-col max-w-screen-2xl sm:flex-row"
    >
      <div class="text-gray-500 text-sm text-center sm:text-left">
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          &#xa9; 2020 tailsections.com &#x2014;
        </span>
        <a
          href="https://twitter.com/tailsections"
          rel="noopener noreferrer"
          class="text-gray-600 ml-1"
          target="_blank"
        >
          @tailsections
        </a>
      </div>
      <span
        class="inline-flex mt-2 justify-center sm:ml-auto sm:mt-0 sm:justify-start"
      >
        <a class="text-gray-500">
          <svg
            fill="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-5 h-5"
            viewBox="0 0 24 24"
          >
            <path
              d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
            ></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg
            fill="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-5 h-5"
            viewBox="0 0 24 24"
          >
            <path
              d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
            ></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-5 h-5"
            viewBox="0 0 24 24"
          >
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path
              d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
            ></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg
            fill="currentColor"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="0"
            class="w-5 h-5"
            viewBox="0 0 24 24"
          >
            <path
              stroke="none"
              d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
            ></path>
            <circle cx="4" cy="4" r="2" stroke="none"></circle>
          </svg>
        </a>
      </span>
    </div>
  </div>
</footer>