Footer

Overview

The footer is a collection of components that include navigational links and utilities and is shared by all pages within the website. It is a global and persistent feature that is used to display tertiary information such as useful links, social media accounts, and contact information.

Default

<footer className="bg-gray-100 dark:bg-gray-800 grid grid-cols-2 lg:grid-cols-4 p-6 gap-x-4 gap-y-8">
  <div className="footer-group product">
    <h3 className="text-base font-medium m-0">Product</h3>
    <ul className="list-none mt-4 mb-0 mx-0 lg:flex-row gap-y-4">
      <li>
        <a href="#">Pre-built UI</a>
      </li>
      <li>
        <a href="#">Notifications</a>
      </li>
      <li>
        <a href="#">Themes</a>
      </li>
      <li>
        <a href="#">Moderation</a>
      </li>
      <li>
        <a href="#">Solutions</a>
      </li>
      <li>
        <a href="#">Case studies</a>
      </li>
    </ul>
  </div>
  <div className="footer-group frameworks">
    <h3 className="text-base font-medium m-0">Frameworks</h3>
    <ul className="list-none mt-4 mb-0 mx-0 lg:flex-row gap-y-4">
      <li>
        <a href="#">React</a>
      </li>
      <li>
        <a href="#">React Native</a>
      </li>
      <li>
        <a href="#">Flutter</a>
      </li>
      <li>
        <a href="#">Vue</a>
      </li>
      <li>
        <a href="#">Angular</a>
      </li>
      <li>
        <a href="#">Other frameworks</a>
      </li>
    </ul>
  </div>
  <div className="footer-group support">
    <h3 className="text-base font-medium m-0">Support</h3>
    <ul className="list-none mt-4 mb-0 mx-0 lg:flex-row gap-y-4">
      <li>
        <a href="#">Guides</a>
      </li>
      <li>
        <a href="#">Tutorials</a>
      </li>
      <li>
        <a href="#">FAQs</a>
      </li>
      <li>
        <a href="#">Changelog</a>
      </li>
      <li>
        <a href="#">Chat with us</a>
      </li>
      <li>
        <a href="#">Email us</a>
      </li>
    </ul>
  </div>
  <div className="footer-group company">
    <h3 className="text-base font-medium m-0">Company</h3>
    <ul className="list-none mt-4 mb-0 mx-0 lg:flex-row gap-y-4">
      <li>
        <a href="#">About us</a>
      </li>
      <li>
        <a href="#">Partners</a>
      </li>
      <li>
        <a href="#">Customers</a>
      </li>
      <li>
        <a href="#" className="jobs">Jobs</a>
      </li>
      <li>
        <a href="#">Terms of service</a>
      </li>
      <li>
        <a href="#">Privacy policy</a>
      </li>
    </ul>
  </div>
  <div className="footer-group logo mt-10">
    <a href="/">
      <img src="/talkjs-logo.svg" width={36} className="mr-4 hover:opacity-60 ease-in-out duration-200" />
    </a>
  </div>
  <div className="footer-group socials mt-10 flex items-center gap-x-4">
    <a href="#" title="TalkJS on GitHub">
      <Icon.GitHub color="var(--accent-6)" size={20} />
    </a>
    <a href="#" title="TalkJS on Twitter">
      <Icon.Twitter color="var(--accent-6)" size={20} />
    </a>
  </div>
</footer>