Create Footers using NextJS and Tailwind CSS
Last Updated :
25 Sep, 2024
The footer is an important part of any web application. It contains important links, social media icons, and copyright information, enhancing user experience and providing easy navigation. we will learn how to create a responsive footer using the Next.js application and Tailwind CSS.
Prerequisites
Approach for creating a footer
- Identify the key components to include: logo, company information, social media links, and navigation sections.
- Create a new Next.js application using the command npx create-next-app.
- Create a new file named Footer.js in the components directory.
- Structure the footer using semantic HTML, ensuring proper sections are created for content organization.
- Use Tailwind CSS classes to apply styles such as background color, text color, padding, and margin.
Steps to create the Project and Install the required modules
Step 1: Create the NextJs App using the following command.
npx create-next-app@latest footer
Configuration which you should follow while creating the App:
Select the following options Step 2: Move to the project folder from the Terminal
cd footer
Step 3: Install dependencies
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons
Project Structure:
Project Structure Updated Dependencies:
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"next": "14.2.13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1"
}Step 4: Write the following code in different files(The name of the files is mentioned in the first line of each code block)
CSS
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
// page.js
import Footer from ".//components/Footer";
const Home = () => {
return (
<div>
<header className="bg-green-600 text-white py-10 text-center">
<h1 className="text-4xl font-bold mb-4">
Welcome to GeeksForGeeks!</h1>
</header>
<main className="bg-white rounded-lg shadow-md p-8">
<h1 className="text-3xl font-bold mb-4">About GeeksforGeeks</h1>
<p className="mb-4">
GeeksforGeeks (GFG) is a popular online platform
that provides a wealth of resources for computer
science and programming enthusiasts. Founded in 2009,
it focuses on sharing knowledge through articles,
tutorials, coding problems, and interview preparation materials.
</p>
<h2 className="text-2xl font-semibold mb-2">Key Features of GFG:</h2>
<ul className="list-disc list-inside mb-4">
<li><strong>Programming Articles:</strong>
In-depth articles on various programming languages,
algorithms, data structures, and software development concepts.</li>
<li><strong>Coding Challenges:</strong>
A wide array of coding problems, ranging
from easy to hard, helping enhance problem-solving skills.</li>
<li><strong>Interview Preparation:</strong>
Provides interview questions, experiences,
and tips for job seekers in tech.</li>
<li><strong>Courses and Tutorials:</strong>
Offers courses on topics like web development,
machine learning, and competitive programming.</li>
<li><strong>Community and Contributions:</strong>
Users can contribute articles and solutions,
fostering a community of learners and educators.</li>
</ul>
<p>
Overall, GFG is an invaluable resource for
students, professionals, and anyone looking
to improve their programming skills or prepare
for technical interviews.
</p>
</main>
{/* Footer Component */}
<Footer />
</div>
);
};
export default Home;
// components/Footer.js
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faTwitter, faInstagram } from "@fortawesome/free-brands-svg-icons";
const Footer = () => {
return (
<footer className="bg-white text-black py-10">
{/* Top Line */}
<div className="border-t-4 border-gray-200"></div>
{/* Footer Content */}
<div className="container mx-auto px-5 grid
grid-cols-1 md:grid-cols-4 gap-8 py-10">
{/* Logo and description */}
<div>
{/* Adding logo from URL */}
<img
src="https://media.geeksforgeeks.org/wp-content/
uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6
-300x160.png"
alt="GeeksforGeeks Logo"
className="mb-4 w-20"
/>
<h2 className="text-2xl font-bold mb-4">GeeksForGeeks</h2>
<p className="text-gray-600">
Corporate & Communications Address: A-143, 9th Floor,
Sovereign Corporate Tower,
Sector- 136, Noida, Uttar Pradesh (201305)
</p>
<p className="text-gray-600">
Registered Address: K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida,
Gautam Buddh Nagar, Uttar Pradesh, 201305
</p>
<div className="flex mt-4 space-x-4">
{/* Social Media Icons */}
<a href="#" className="text-gray-600 hover:text-black">
<FontAwesomeIcon icon={faFacebook} size="lg" />
</a>
<a href="#" className="text-gray-600 hover:text-black">
<FontAwesomeIcon icon={faTwitter} size="lg" />
</a>
<a href="#" className="text-gray-600 hover:text-black">
<FontAwesomeIcon icon={faInstagram} size="lg" />
</a>
</div>
</div>
{/* Explore Column */}
<div>
<h3 className="font-bold mb-4">Explore</h3>
<ul className="text-gray-600 space-y-2">
<li><a href="#" className="hover:text-black">
Hack-A-thon</a></li>
<li><a href="#" className="hover:text-black">
GFG Weekly Contest</a></li>
<li><a href="#" className="hover:text-black">
Master CP</a></li>
<li><a href="#" className="hover:text-black">
DSA in Java</a></li>
<li><a href="#" className="hover:text-black">
Master System Design</a></li>
<li><a href="#" className="hover:text-black">
Offline Classes</a></li>
</ul>
</div>
{/* Languages Column */}
<div>
<h3 className="font-bold mb-4">Languages</h3>
<ul className="text-gray-600 space-y-2">
<li><a href="#" className="hover:text-black">
Python</a></li>
<li><a href="#" className="hover:text-black">
Java</a></li>
<li><a href="#" className="hover:text-black">
C++</a></li>
<li><a href="#" className="hover:text-black">
JavaScript</a></li>
<li><a href="#" className="hover:text-black">
GoLang</a></li>
<li><a href="#" className="hover:text-black">
SQL</a></li>
</ul>
</div>
{/* Competitive Exams Column */}
<div>
<h3 className="font-bold mb-4">Competitive Exams</h3>
<ul className="text-gray-600 space-y-2">
<li><a href="#" className="hover:text-black">
SSC CGL</a></li>
<li><a href="#" className="hover:text-black">
IBPS PO</a></li>
<li><a href="#" className="hover:text-black">
SBI PO</a></li>
<li><a href="#" className="hover:text-black">
NDA</a></li>
</ul>
</div>
</div>
{/* Footer Bottom */}
<div className="text-center text-gray-500 mt-10">
@GeeksforGeeks, Sanchhaya Education Private Limited,
All rights reserved
</div>
</footer>
);
};
export default Footer;
Run your app by executing the below command:
npm run dev
Output:
Similar Reads
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 an
3 min read
Create FAQs using Next.js and Tailwind CSS
This tutorial will guide us through building a dynamic FAQ section in a Next.js application. The FAQ section will allow users to click on a question to reveal the corresponding answer, providing a clean and user-friendly interface. We'll use Tailwind CSS for styling, ensuring the component is fully
4 min read
Create Flyout Menus using Next.JS and Tailwind CSS
We'll use Next.js as the framework to set up the project and Tailwind CSS for rapid styling. Tailwind makes it easy to style components without writing custom CSS for each element, keeping the development process smooth and efficient. PrerequisitesNode.js Next.jsTailwind CSSApproach For Creating Fly
4 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Flyout Menus using React and Tailwind CSS
Flyout menus are a type of navigational menu that can be displayed when the user hovers over or clicks on an item allowing for a clean and organized display of additional options without crowding the main interface. In this article, we will create a responsive flyout menu using React and Tailwind CS
4 min read
Create Hero Sections using Next.JS and Tailwind CSS
We will learn how to create a beautiful Hero Section using Next.js and Tailwind CSS. A Hero Section is the first visual element a user sees on a website and it is very important for making a good first impression. It contains a bold headline, a call to action (CTA), and sometimes an image or video.
3 min read
Create Form Layouts UI using Next.JS and Tailwind CSS
This guide walks through building a responsive form layout in Next.js using Tailwind CSS for styling. It covers setting up a Next.js project, configuring Tailwind, and creating a form component with optional validation, ensuring a seamless development process for a modern web form UI. ApproachThe fo
4 min read
Create Feature Section Using Next.JS and Tailwind CSS
A feature section is a key part of a modern website that highlights the essential products or services a company offers. It's an interactive section that grabs the user's attention and communicates the core values or features of the brand or platform. In this tutorial, we'll walk through the process
3 min read
Create Feeds UI using React and Tailwind CSS
In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
Create Logo Clouds using Next.JS and Tailwind CSS
A logo cloud is a collection of logos that are displayed on a webpage to showcase partnerships, clients, or supported platforms. This component is often used to establish credibility or showcase affiliations. Using Next.js with Tailwind CSS you can create a responsive and customizable logo cloud tha
4 min read