Create Footers Using React And Tailwind CSS
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-appStep 2: Install node modules using the command.
npm installcd react-appStep 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:
Updated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
Step 6: Install React Icons
npm install react-iconsExample: In this example we will create the footers using react and tailwind CSS
//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 startOutput:
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.
