DEV Community

Cover image for Building React Footer Components with Tailwindcss

Posted on

Building React Footer Components with Tailwindcss

In web development, a well-designed footer can be the finishing touch that elevates the overall user experience of your website. Today, we’ll explore how to create a stylish and functional footer in React using reusable components.


In this tutorial, we’ll be working with a React code snippet that demonstrates how to build a sleek footer component. This footer includes social media icons with a hover effect and neatly organized sections for different types of content.

// Importing necessary React and icon components
import React from 'react';
import {
} from 'react-icons/fa';
// Reusable SocialIcon component with hover effect
const SocialIcon = ({ icon: Icon }) => (
  <Icon className="social-icon hover:text-[#00df9a]" size={30} />
// Footer component
const Footer = () => {
  // Array defining the content and structure of the footer
  const items = [
    // Social media icons
    { type: 'icon', icon: FaFacebookSquare },
    { type: 'icon', icon: FaInstagram },
    { type: 'icon', icon: FaTwitterSquare },
    { type: 'icon', icon: FaGithubSquare },
    { type: 'icon', icon: FaDribbbleSquare },
    // Footer sections
    { type: 'section', title: 'Solutions', items: ['Analytics', 'Marketing', 'Commerce', 'Insights'] },
    { type: 'section', title: 'Support', items: ['Pricing', 'Documentation', 'Guides', 'API Status'] },
    { type: 'section', title: 'Company', items: ['About', 'Blog', 'Jobs', 'Press', 'Careers'] },
    { type: 'section', title: 'Legal', items: ['Claim', 'Policy', 'Terms'] },
  // JSX structure of the footer
  return (
    <div className='bg-[#000300] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300'>
      {/* Left section with brand and social icons */}
        <h1 className='w-full text-3xl lg:text-4xl xl:text-5xl font-bold text-[#00df9a]'>REACT.</h1>
        <p className='py-4'>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id odit ullam iste repellat consequatur libero reiciendis, blanditiis accusantium.
        <div className='flex justify-between md:w-[75%] my-6'>
          {/* Mapping over social icons and rendering the SocialIcon component */}
          {, index) => (
            item.type === 'icon' ? (
              <SocialIcon key={index} icon={item.icon} />
            ) : null
      {/* Right section with footer content organized in sections */}
      <div className='lg:col-span-2 flex justify-between mt-6'>
        {/* Mapping over sections and rendering content */}
        {, index) => (
          item.type === 'section' ? (
            <div key={index}>
              <h6 className="font-medium text-gray-100 text-xl">{item.title}</h6>
                {/* Mapping over items in each section */}
                {, subIndex) => (
                  <li key={subIndex} className='py-2 text-sm'>{subItem}</li>
          ) : null
export default Footer;
Enter fullscreen mode Exit fullscreen mode

How to Use

To incorporate this footer into your React application, follow these simple steps:

  1. Install React Icons: Make sure to install the react-icons package by running:
npm install react-icons
Enter fullscreen mode Exit fullscreen mode
  1. Copy the Code: Copy the provided Footer component code and paste it into your React project.

  2. Integrate into App: Import the Footer component into your main App.js or any other relevant file:

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

function App() {
  return (
      <Footer />

export default App;
Enter fullscreen mode Exit fullscreen mode
  1. Styling: Feel free to customize the styles and content of the footer to match your project’s design.

By following these steps, you can quickly enhance your React application with a stylish and functional footer.


Creating reusable components in React not only enhances code maintainability but also allows for the easy incorporation of sophisticated features. This tutorial demonstrated how to build a responsive and visually appealing footer using React components. Feel free to adapt and expand upon this code to suit the specific needs of your project. Happy coding!

Top comments (0)