Footer Component with React & Tailwind

Integrate a custom footer into your React project using Tailwind CSS and React Icons.

Introduction

This guide will walk you through setting up a stylish and responsive footer for your React application using Tailwind CSS and React Icons. The component is customizable to fit your branding needs.

Prerequisites

Ensure that your project is set up with React and Tailwind CSS. If not, you can follow the installation steps below.

Installation

First, install the necessary dependencies:

Terminal

npm install -D tailwindcss react-icons --save
npx tailwindcss init

This will install Tailwind CSS and React Icons, and create a tailwind.config.js file for customization.

Component Setup

Create a new file in your project directory at components/shared/footer.tsx, and copy the following code into it:

footer.tsx

import { FaHeart } from "react-icons/fa";

export default function Footer() {
  return (
    <>
      <div className="mt-10 flex w-full items-center justify-center">
        <div className="h-[1px] w-[95vw] rounded-full bg-neutral-950/10" />
      </div>

      <footer className="text-md my-5 flex flex-col items-center justify-between px-5 md:flex-row md:px-10 xl:px-20 2xl:px-28">
        <small className="text-center md:text-left">
          © Copyright&nbsp;
          <span className="font-semibold">BRAND NAME</span>. &nbsp;
          {new Date().getFullYear()} All Rights Reserved.
        </small>

        <small className="text-md text-center md:text-right">
          Made with <FaHeart className="inline-block" /> by{" "}
          <a
            href="https://edward-hyde.vercel.app/"
            target="_blank"
            rel="noreferrer"
            className="transition-all duration-200 hover:text-blue-700"
          >
            YOUR NAME
          </a>
        </small>
      </footer>
    </>

);
}

Component Explanation

Divider : A thin line separates the footer from the content above, providing a clean transition.
Footer Structure : The footer is designed to be responsive, adjusting its layout based on screen size.
Customization : Replace BRAND NAME with your brand's name and YOUR NAME with your name or handle. The heart icon adds a personal touch.

Usage

To integrate the footer component into your application, import it into your app/layout.tsx file and include it in the TSX:

layout.tsx

import Footer from "@/components/shared/Footer";

function Layout() {
return (

<>
  {/* Other layout components */}
  <Footer />
</>
); }