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.PrerequisitesJav
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 for
3 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