Social Media Footer Component for Your React Application using tailwindcss

In today’s digital age, having a strong online presence is crucial. One way to make it easier for users to connect with you and stay updated with your latest work is by adding social media links to your website. In this article, we will explore how to create a stylish and functional footer component for your React application, complete with links to your various social media profiles. To achieve this, we’ll be using React Icons and tailwindcss for styling.

Prerequisites

Before we begin, make sure you have a React project set up. If you don’t have one already, you can create a new React application using Create React App or your preferred method.

Setting Up the Footer Component

First, let’s create a Footer component that will contain our social media links. We’ll use the react-icons library to display social media icons and tailwindcss for styling.

import {
  FiGithub,
  FiTwitter,
  FiLinkedin,
  FiGlobe,
  FiYoutube,
} from "react-icons/fi";

const socialLinks = [
  {
    id: 1,
    icon: <FiGlobe />,
    url: "https://www.stoman.me/",
  },
  {
    id: 2,
    icon: <FiGithub />,
    url: "https://github.com/",
  },
  {
    id: 3,
    icon: <FiTwitter />,
    url: "https://twitter.com/",
  },
  {
    id: 4,
    icon: <FiLinkedin />,
    url: "https://www.linkedin.com/in/",
  },
  {
    id: 5,
    icon: <FiYoutube />,
    url: "https://www.youtube.com/c/",
  },
];

const Footer = () => {
  return (
    <div className="container mx-auto">
      <div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
        {/* Footer social links */}
        <div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
          <p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
            Follow me
          </p>
          <ul className="flex gap-4 sm:gap-8">
            {socialLinks.map((link) => (
              <a
                href={link.url}
                target="__blank"
                key={link.id}
                className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-300"
              >
                <i className="text-xl sm:text-2xl md:text-3xl">{link.icon}</i>
              </a>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Footer;

In this code, we define a Footer component that renders a list of social media links. Each link includes an icon and a URL. We use tailwindcss classes to style the links.

Integrating the Footer Component

Now that we have our Footer component ready, let's integrate it into our main application.

import Footer from "@/Components/Footer"; // Update the import path as needed

const App = () => {
  return (
    <>
      <Footer />
    </>
  );
};
export default App;

Simply import the Footer component into your main application file and include it in your component tree. You can customize the styling and icons as needed to match your application's design.

Conclusion

In this article, we’ve created a stylish and functional footer component for a React application. This footer includes links to various social media profiles and is easy to integrate into your project. By adding this component, you can make it easier for users to connect with you and stay updated with your latest work. Customize it to fit your design and branding, and enhance the user experience on your website. Happy coding!