Create Footers Using React And Tailwind CSS

Last Updated : 24 Sep, 2024

We will learn how to create a responsive footer using React and Tailwind CSS with a modern design. The footer will feature a green background with white text providing a clean and professional look. We will create three sections: Contacts social media and Services to display important information and links. We will use React Icons to enhance the Social Media section with popular platform icons like Facebook Twitter Instagram and LinkedIn.

Prerequisites

Steps to Create Footers Using React And Tailwind CSS

Step 1: Set up the project using the command.

npx create-react-app react-app

Step 2: Install node modules using the command.

npm install

cd react-app

Step 3: Install Tailwind CSS using the command.

npm install -D tailwindcss
npx tailwindcss init

Step 4: Configure the tailwind paths in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Add tailwind directives to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
		sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
		monospace;
}

Project Structure:

Screenshot-2024-09-12-114329 — Project folder

Updated Dependencies:

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
}

Step 6: Install React Icons

npm install react-icons

Example: In this example we will create the footers using react and tailwind CSS

JavaScript

//src/app.jsx

import React from 'react';
import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa';

const App = () => {
  return (
    <footer className="bg-green-600 text-white py-8">
      <div className="container mx-auto grid grid-cols-1 
            md:grid-cols-4 gap-8 w-11/12">

        <div className="flex items-center">
          <h1 className="text-2xl font-bold">GeeksForGeeks</h1>
        </div>

        <div>
          <h3 className="text-xl font-bold mb-4">Contacts</h3>
          <p>Phone: +1 234 567 890</p>
          <p>Email: info@example.com</p>
          <p>Address: 123 Main Street, City</p>
        </div>

        <div>
          <h3 className="text-xl font-bold mb-4">Social Media</h3>
          <div className="flex space-x-4">
            <a href="https://facebook.com" target="_blank"
              rel="noopener noreferrer">
              <FaFacebook className="text-white text-2xl 
                            hover:text-gray-300" />
            </a>
            <a href="https://twitter.com" target="_blank"
              rel="noopener noreferrer">
              <FaTwitter className="text-white text-2xl
                            hover:text-gray-300" />
            </a>
            <a href="https://instagram.com" target="_blank"
              rel="noopener noreferrer">
              <FaInstagram className="text-white text-2xl
                            hover:text-gray-300" />
            </a>
            <a href="https://linkedin.com" target="_blank"
              rel="noopener noreferrer">
              <FaLinkedin className="text-white text-2xl
                            hover:text-gray-300" />
            </a>
          </div>
        </div>

        <div>
          <h3 className="text-xl font-bold mb-4">Services</h3>
          <ul>
            <li><a href="#" className="hover:underline">
              Web Development</a></li>
            <li><a href="#" className="hover:underline">
              App Development</a></li>
            <li><a href="#" className="hover:underline">
              SEO Optimization</a></li>
          </ul>
        </div>

      </div>
    </footer>
  );
};

export default App;

To start the Application run the following command:

npm start

Output:

file — Footer using React and Tailwind CSS

Conclusion

In this article we have created a responsive footer using React and Tailwind CSS styled with a green background and white text. We integrated React Icons to display clickable social media icons. The footer contains different sections for Contacts and social media and Services, and it can easily be adapted for any application.

Create Footers Using React And Tailwind CSS

myarticp87y

Improve

Article Tags :

Create Footers Using React And Tailwind CSS

Prerequisites

Steps to Create Footers Using React And Tailwind CSS

Project Structure:

Updated Dependencies:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?