Responsive Footer using React with Tailwind CSS and React Icons
Tags: react, footer, web, webdev
Published: 2024-01-18 09:43:31

 
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr00ho5nbicepr6s5krr.png)

In web development, creating an appealing and functional footer is crucial for a polished user experience. In this article, we’ll explore how to build a sleek footer component using Tailwind CSS and React Icons. We’ll break down the code step by step and explain the key components involved.

## Prerequisites

Before diving into the code, make sure you have the following set up:

* [React](https://reactjs.org/) project
    
* [Tailwind CSS](https://tailwindcss.com/) integration
    
* [react-icons](https://react-icons.github.io/react-icons) library for icon integration
    

## Getting Started

Let’s start by creating a functional React component for our footer. Here’s the code:

```plaintext
import {
  FaInstagram,
  FaDribbble,
  FaXTwitter,
  FaYoutube,
} from "react-icons/fa6";

const Footer = () => {
  const socialLinks = [
    { label: "YouTube", icon: FaYoutube },
    { label: "Instagram", icon: FaInstagram },
    { label: "Twitter", icon: FaXTwitter },
    { label: "Dribbble", icon: FaDribbble },
  ];

  const links = [
    [
      { label: "Company", key: "header-1" },
      { label: "About us", key: "item-1-1" },
      { label: "Blog", key: "item-1-2" },
      { label: "Contact us", key: "item-1-3" },
      { label: "Pricing", key: "item-1-4" },
      { label: "Testimonials", key: "item-1-5" },
    ],
    [
      { label: "Support", key: "header-2" },
      { label: "Help center", key: "item-2-1" },
      { label: "Terms of service", key: "item-2-2" },
      { label: "Legal", key: "item-2-3" },
      { label: "Privacy policy", key: "item-2-4" },
      { label: "Status", key: "item-2-5" },
    ],
  ];

  return (
    <div className="app min-h-screen flex items-end justify-center font-poppins">
      <div className="py-16 grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 grid-cols-1 bg-green-800 text-white w-full p-4 relative">
        <div className="  ">
          <div className="footer-img flex items-center">
            <img
              src={"https://i.imgur.com/520zDfd.png"}
              alt=""
              className="w-16 h-auto"
            />
            <span className="text-3xl font-bold pl-2 text-white">
              Company name
            </span>
          </div>
          <div className="infos text-gray-400">
            <span>Copyright © 2020 Nexcent ltd.</span>
            <span>All rights reserved</span>
          </div>
          <div className="footer-icons flex items-center space-x-3">
            {socialLinks.map((socialLink, index) => {
              const Icon = socialLink.icon;
              return (
                <Icon
                  key={`social-${index}`}
                  className="w-14 h-14 p-2 rounded-full bg-green-700 hover:bg-white hover:text-green-700 cursor-pointer"
                />
              );
            })}
          </div>
        </div>
        <div className="mx-2 grid w-full py-5 sm:py-0 grid-cols-2 ">
          {links.map((col, index) => {
            return (
              <ul className={`col col-${index + 1}`} key={`col-${index}`}>
                {col.map((link, index) => {
                  return (
                    <li
                      key={`link-${col}-${index}`}
                      className={`text-gray-400 cursor-pointer ${
                        link.key === "header-1" || link.key === "header-2"
                          ? "text-2xl text-white"
                          : ""
                      }`}
                    >
                      {link.label}
                    </li>
                  );
                })}
              </ul>
            );
          })}
        </div>
        <div className="footer-form flex flex-col  ">
          <label className="text-lg font-semibold text-white">
            Stay up to date
          </label>
          <input
            type="email"
            placeholder="Subscribe to our email"
            className="mt-2 w-full border-none rounded-lg py-3 px-6"
          />
        </div>
      </div>
    </div>
  );
};

export default Footer;
```

Now import `Footer` component to `App.js` file

```plaintext
import Footer from "@/Components/Footer";

const page = () => {
  return (
    <>
      <Footer />
      {/* other component here */}
    </>
  );
};

export default page;
```

# **Explanation**

Let’s break down the key components of our footer component:

1. Social Media Icons: We import social media icons from `react-icons/fa6` and render them as clickable icons.
    
2. Footer Links: We organize the footer links into two columns, each containing links with labels like “About us,” “Blog,” and more. These links are mapped and displayed dynamically.
    
3. Company Info: We display the company logo, name, and copyright information.
    
4. Email Subscription: An input field for users to subscribe to the newsletter.
    

# **Styling with Tailwind CSS**

Tailwind CSS classes are used extensively to style the footer. Classes like `text-white`, `bg-green-800`, `rounded-full`, and others are applied to various elements for a clean and responsive design.

## Conclusion

In this article, we’ve created a stylish and functional footer component for your React application using Tailwind CSS and React Icons. You can customize this footer to fit the branding and content of your website. A well-designed footer can improve user engagement and navigation on your site. Happy coding!