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;
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;
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)