DEV Community

Cover image for Creating a Responsive Footer Component in React Using Tailwind CSS
ryad
ryad

Posted on

Creating a Responsive Footer Component in React Using Tailwind CSS

Image description
If you’re building a web application or a website, having an aesthetically pleasing and functional footer is essential. In this tutorial, we will walk through the process of creating a responsive footer component in React using Tailwind CSS. We’ll break down the App.js and Footer.js files to understand how to structure and style the footer.

Getting Started

Before we dive into the code, make sure you have a basic understanding of React and Tailwind CSS. If you’re new to these technologies, you can find plenty of resources online to help you get started.

Project Setup

Assuming you have a React project set up, let’s start by creating the footer component.

_Footer.js
_

import { FaFacebookF } from "react-icons/fa";
import { AiOutlineTwitter, AiFillYoutube } from "react-icons/ai";
import { BiLogoPinterestAlt } from "react-icons/bi";

function Footer() {
  const iconsTab = [
    { icon: <FaFacebookF /> },
    { icon: <AiOutlineTwitter /> },
    { icon: <AiFillYoutube /> },
    { icon: <BiLogoPinterestAlt /> },
  ];
  return (
    <>
      <footer className="bg-white">
        <div className="container mx-auto  py-[10rem]">
          {/* footer div all */}
          <div className="flex justify-between flex-col md:flex-row  items-center md:items-start  md:gap-[5rem] text-left">
            {/* logo side */}
            <div className="flex flex-col w-1/2 md:p-0 py-4 gap-8">
              <img
                src={"https://i.imgur.com/520zDfd.png"}
                alt="footer_logo"
                className="w-[18rem]"
              />
              <p className="text-[15px] font-medium text-[#646464]">
                Take your health and body to the next level with our
                comprehensive program designed to help you reach your fitness
                goals.
              </p>
              {/* socials */}
              <div className="flex gap-7 text-[18px] text-[#646464] justify-center md:justify-start">
                {iconsTab.map(({ icon }, index) => {
                  return (
                    <div
                      key={index}
                      className="text-2xl bg-[#efefef] p-2 rounded-full hover:bg-[#ff0366] hover:text-white"
                      style={{ transition: "all 0.3s" }}
                    >
                      {icon}
                    </div>
                  );
                })}
              </div>
              <p className="text-[16px] font-medium text-[#646464]">
                Privacy Policy | © {new Date().getFullYear()} Gymate <br />{" "}
                Design by{" "}
                <a
                  target="_blank"
                  rel="noreferrer"
                  href="https://www.radiustheme.com/"
                >
                  RadiusTheme
                </a>
              </p>
            </div>

            {/* middle div */}
            <div className="flex flex-col gap-8 relative">
              <p className="text-[22px] font-bold footer-main">Our Classes</p>

              <span className="top-[33px] absolute w-[7rem] h-[4px] bg-[#ff0366]"></span>

              <p className="text-[16px] hover:text-[#ff0366] cursor-pointer text-[#646464] font-medium hover:font-bold">
                Fitness Classes
              </p>
              <p className="text-[16px] hover:text-[#ff0366] cursor-pointer text-[#646464] font-medium hover:font-bold">
                Aerobics Classes
              </p>
              <p className="text-[16px] hover:text-[#ff0366] cursor-pointer text-[#646464] font-medium hover:font-bold">
                Power Yoga
              </p>
              <p className="text-[16px] hover:text-[#ff0366] cursor-pointer text-[#646464] font-medium hover:font-bold">
                Learn Machines
              </p>
              <p className="text-[16px] hover:text-[#ff0366] cursor-pointer text-[#646464] font-medium hover:font-bold">
                Full-body Strength
              </p>
            </div>

            {/* right div */}
            <div className="flex flex-col gap-8 relative">
              <p className="text-[22px] font-bold footer-main">Working Hours</p>

              <span className="top-[33px] absolute w-[7rem] h-[4px] bg-[#ff0366]"></span>

              <p className="text-[16px]  text-[#646464] font-bold">
                Monday - Friday:
              </p>
              <p className="text-[16px] text-[#646464] font-medium">
                7:00am - 21:00pm
              </p>
              <p className="text-[16px] text-[#646464] font-bold">Saturday:</p>
              <p className="text-[16px] text-[#646464] font-medium">
                7:00am - 19:00pm
              </p>
              <p className="text-[16px] text-[#646464] font-bold ">
                Sunday - Closed
              </p>
            </div>

            {/* middle div */}
            <span></span>
          </div>
        </div>
      </footer>
    </>
  );
}

export default Footer;
Enter fullscreen mode Exit fullscreen mode

Structuring the Footer

The footer is divided into three sections: logo and description, classes, and working hours. Each section is represented by a div element with appropriate styling.

Adding Social Icons

Within the logo and description section, we use the iconsTab array to map through social icons and render them. These icons are styled with a hover effect using Tailwind CSS classes.

Styling and Responsiveness

Tailwind CSS classes are used throughout the component to style elements. The classes for responsive design ensure that the footer looks great on different screen sizes.

_App.js
_

import React from "react";
import Footer from "./components/Footer";

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

Enter fullscreen mode Exit fullscreen mode

Conclusion

Creating a responsive footer component in React using Tailwind CSS can greatly enhance the visual appeal and functionality of your web application or website. By breaking down the code into different sections and using Tailwind CSS classes, you can easily customize and adapt the footer to your design requirements. Feel free to extend this example by adding additional sections or features to make your footer even more informative and engaging for users.

Remember that this tutorial provides a basic example, and you can further enhance the footer’s functionality and design according to your project’s needs. Happy coding!

Top comments (0)