Create Logo Clouds using Next.JS and Tailwind CSS
Last Updated :
17 Oct, 2024
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 that adapts to various screen sizes providing an elegant presentation. We will create Logo Clouds in Next.js using Tailwind CSS.
Prerequisites
Approach
In this approach, we have created an array of logo objects containing image URLs and alt text. The array is then mapped over using JavaScript's map() function to dynamically render each logo one by one. We have used the built-in <Image /> component from Next.js. For the styling and layout, We have used Tailwind CSS to create a responsive grid structure.
Steps to Create Next.js Application
Step 1: Create a Next.js application using the following command.
npx create-next-app@latest logo-clouds
Step 2: It will ask you some questions, so choose the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
Step 3: After creating your project folder i.e. logo-clouds, move to it using the following command.
cd logo-clouds
Step 4: Install the Tailwind CSS module.
- If you have chosen the Tailwind CSS while installing the app, Tailwind CSS will automatically get included in your application other wise use the below command to install It.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Configure Tailwind to remove unused styles in production by editing the tailwind.config.js file:
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
};
- Add Tailwind’s directives to your /globals.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Project Structure:
Project StructureUpdated Dependencies:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.15"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "14.2.15"
}Note: Remove the included extra CSS from global.css file
- Make sure to add the main media url used domain in next.config.mjs file.
Example: The below example demonstrates creating of logo clouds in Next.js using Tailwind CSS.
JavaScript
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
// Add the domain of the external image
domains: ['media.geeksforgeeks.org'],
},
};
export default nextConfig;
// src/app/page.js
import Image from "next/image";
export default function Home() {
const logos = [
{
name: 'React',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920111219/reacticon.png',
alt: 'React Logo'
},
{
name: 'Tailwind CSS',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920111323/Tailwind-CSS.png',
alt: 'Tailwind CSS Logo'
},
{
name: 'Node.js',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920112541/node.png',
alt: 'Node.js Logo'
},
{
name: 'JavaScript',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920112648/JS.png',
alt: 'JavaScript Logo'
},
{
name: 'HTML5',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920113634/HTML.png',
alt: 'HTML5 Logo'
},
{
name: 'CSS3',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920113755/CSS-3.png',
alt: 'CSS3 Logo'
},
{
name: 'GitHub',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920113738/Github.png',
alt: 'GitHub Logo'
},
{
name: 'Docker',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920113723/docker.png',
alt: 'Docker Logo'
},
{
name: 'AWS',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920113654/aws.png',
alt: 'AWS Logo'
},
{
name: 'MySQL',
url:
'https://media.geeksforgeeks.org/wp-content/uploads/20240920112616/MySQL.png',
alt: 'MySQL Logo'
},
];
return (
<div className="bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-center text-3xl font-bold text-gray-800">
Our Technology Partners
</h2>
<p className="text-center text-lg text-gray-600 mt-4">
We work with the latest and most reliable technologies.
</p>
<div className="mt-12 grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6">
{logos.map((logo, index) => (
<div key={index} className="flex justify-center hover:scale-105 transition-transform duration-300">
<Image
src={logo.url}
alt={logo.alt}
width={120}
height={80}
className="object-contain"
/>
</div>
))}
</div>
</div>
</div>
);
}
To run the Application open the terminal in the project folder and enter the following command:
npm run dev
Output:
Similar Reads
Create Logo Clouds using React and Tailwind CSS
A Logo Cloud is a webpage section that displays logos of partners, sponsors, clients, or technologies in a visually appealing way. This component is often used to establish credibility or showcase affiliations. Using React and Tailwind CSS you can create a responsive and customizable logo cloud that
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 Footers using NextJS and Tailwind CSS
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. PrerequisitesJa
4 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 Command Palettes UI using Next.JS and Tailwind CSS
A command palette is a user interface element that allows users to easily access and execute commands or functions in an application. we will build a command palette UI using Next.js as the framework Tailwind CSS for styling and React Icons for adding interactive icons. A command palette is essentia
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 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 Select Menus UI Using Next.JS and Tailwind CSS
Creating a Select Menu UI using Next.js and Tailwind CSS involves several steps. Below is a detailed approach to guide you through the process without providing specific code. Prerequisites:JavascriptReactNext.jsTailwind CSSNode.jsApproach to Create Select Menus UIBegin by initializing your Next.js
3 min read
Create Contact Cards Component Using Next.js and Tailwind CSS
The contact card component can display user information, such as a profile picture, contact details, and links to social media profiles. We will use Tailwind CSS for styling to ensure the card is visually appealing and responsive. Output Preview: Let us have a look at how the final output will look
4 min read