{/** Inspired by https://www.pinterest.com/pin/21814379433014141/*/}
{/** Parent div is only for display purposes, is not required */}

<div className="flex min-h-screen w-full items-end">
  <footer className="flex w-full flex-col py-16">
    <div
      className="flex px-6 max-md:flex-col max-md:space-y-10 md:justify-between md:space-x-20 md:px-20 2xl:px-40"
    >
      <div className="space-y-10 sm:max-w-xs md:space-y-6 lg:max-w-md">
        <a className="select-none space-x-2" href="#">
          <p className="text-2xl">Kilah<span className="text-primary">UI</span></p>
        </a>
        <div className="space-y-2">
          <h4 className="text-xl text-primary">About Us</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vel,
            ratione libero architecto minus eveniet sint amet explicabo
            necessitatibus.
          </p>
        </div>
        <div className="space-y-2">
          <h4 className="text-xl text-primary">Contact Us</h4>
          <div className="flex flex-col space-y-2">
            <div className="inline-flex space-x-1">
              <span className="text-primary">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
                  />
                  <path d="M3 7l9 6l9 -6" />
                </svg>
              </span>
              <span>procastinatordev@gmail.com</span>
            </div>
            <div className="inline-flex space-x-1">
              <span className="text-primary">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"
                  />
                  <path d="M15 9l5 -5" />
                  <path d="M15 5l0 4l4 0" />
                </svg>
              </span>
              <span>+1 123 456 789</span>
            </div>
          </div>
        </div>
      </div>
      <div
        className="grid flex-1 pt-5 max-xl:gap-20 max-md:gap-10 lg:grid-cols-2 xl:grid-cols-3 xl:justify-items-center"
      >
        <div className="w-fit">
          <h4 className="text-xl text-primary">Information</h4>
          <nav>
            <ul className="mt-4 space-y-2">
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  About Us
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Blog
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Events
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Testimonials
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  More Search
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div className="w-fit">
          <h4 className="gap-20 text-xl text-primary">Helpful Links</h4>
          <nav>
            <ul className="mt-4 space-y-2">
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Services
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Supports
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Terms & Conditions
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary hover:underline">
                  Privacy Policy
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div className="max-xl:col-span-2 max-xl:w-full max-lg:col-span-1">
          <h4 className="text-xl text-primary">Newsletter</h4>
          <form action="" className="mt-4 flex flex-col space-y-2 max-xl:w-full">
            <div className="inline-flex">
              <input
                type="text"
                className="peer w-full max-w-md rounded-r-xl border-2 border-l-0 border-transparent bg-black p-2 px-2 transition focus:border-primary focus:outline-none"
                placeholder="procastinatordev@gmail.com"
              />
              <div
                className="order-first flex place-content-center items-center rounded-l-xl border-2 border-r-0 border-transparent bg-black pl-2 text-primary transition peer-focus:border-primary"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
                  />
                  <path d="M3 7l9 6l9 -6" />
                </svg>
              </div>
            </div>
            <button
              className="w-fit rounded-xl bg-primary px-4 py-2 hover:bg-primary/80"
              type="submit"
            >
              Subscribe
            </button>
          </form>
        </div>
      </div>
    </div>
    <div
      className="mt-10 flex w-[90%] self-center border-t border-foreground/20 py-10 max-lg:flex-col max-lg:space-y-6 lg:justify-between"
    >
      <div className="flex-1 max-md:hidden"></div>
      <div>
        <ul className="flex flex-1 place-content-center items-center space-x-4">
          <li>
            <a
              className="group p-2"
              target="_blank"
              rel="noopener noreferer"
              aria-label="Link to Github"
              href="#"
            >
              <svg
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                role="img"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>GitHub</title>
                <path
                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                />
              </svg>
            </a>
          </li>

          <li>
            <a
              className="group p-2"
              target="_blank"
              rel="noopener noreferer"
              aria-label="Link to LinkedIn"
              href="#"
            >
              <svg
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                role="img"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>LinkedIn</title>
                <path
                  d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                />
              </svg>
            </a>
          </li>

          <li>
            <a
              className="group p-2"
              target="_blank"
              rel="noopener noreferer"
              aria-label="Link to X"
              href="#"
            >
              <svg
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                role="img"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>X</title>
                <path
                  d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
                />
              </svg>
            </a>
          </li>

          <li>
            <a
              target="_blank"
              className="group p-2"
              rel="noopener noreferer"
              aria-label="Link to Product Hunt"
              href="#"
            >
              <svg
                role="img"
                viewBox="0 0 24 24"
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>Product Hunt</title>
                <path
                  d="M13.604 8.4h-3.405V12h3.405c.995 0 1.801-.806 1.801-1.801 0-.993-.805-1.799-1.801-1.799zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm1.604 14.4h-3.405V18H7.801V6h5.804c2.319 0 4.2 1.88 4.2 4.199 0 2.321-1.881 4.201-4.201 4.201z"
                />
              </svg>
            </a>
          </li>

          <li>
            <a
              target="_blank"
              className="group p-2"
              rel="noopener noreferer"
              aria-label="Link to Telegram"
              href="#"
            >
              <svg
                role="img"
                viewBox="0 0 24 24"
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>Telegram</title>
                <path
                  d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"
                />
              </svg>
            </a>
          </li>

          <li>
            <a
              target="_blank"
              className="group p-2"
              rel="noopener noreferer"
              aria-label="Link to Mastodon"
              href="#"
            >
              <svg
                role="img"
                viewBox="0 0 24 24"
                className="h-5 w-5 fill-foreground transition group-hover:fill-primary sm:h-6 md:w-6"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>Mastodon</title>
                <path
                  d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"
                />
              </svg>
            </a>
          </li>
        </ul>
      </div>
      <div
        className="flex flex-1 place-content-center items-center lg:place-content-end"
      >
        <p className="w-fit">2024 &copy; KilahUi. All rights reserved</p>
      </div>
    </div>
  </footer>
</div>
#Grid with cta and form

#Grid with form

#Social Media on left, grid on right

#Centered with form

#Three Section Footer

#Centered Footer

#Simple Footer
