Create Logo Clouds using Next.JS and Tailwind CSS

Last Updated : 23 Jul, 2025

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 Structure

Updated 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;

JavaScript

// 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:

Next.js Introduction

jaimin78

Improve

Article Tags :

Create Logo Clouds using Next.JS and Tailwind CSS

Prerequisites

Approach

Steps to Create Next.js Application

Project Structure:

Updated Dependencies:

Similar Reads

Next js basics

Next js Routing

Next js Data Fetching

Next js Rendering

Next js Styling

Next js Optimizing

Next js Configuring

Thank You!

What kind of Experience do you want to share?