Home
ariaw
Logo grid

Logo grid

This tailwind example is contributed by ariaw, on 16-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Grid Logo cloud

Author ariaw

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Logo grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }

.logo-img {
      filter: grayscale(100%) brightness(70%);
      transition: all 0.3s ease;
    }

.logo-card {
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }

.logo-card:hover {
      border-color: #e5e5e5;
      transform: translateY(-5px);
    }

.logo-card:hover .logo-img {
      filter: grayscale(0%) brightness(100%);
    }

.floating-bg {
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(249, 249, 249, 0.6) 0%, transparent 50%);
    }
  </style>
</head>

<body class="bg-[#f9f9f9] min-h-screen flex items-center justify-center p-6 floating-bg">
  <div class="max-w-5xl w-full">
    <div class="text-center mb-20">
      <p class="text-gray-500 text-sm mb-4 font-medium uppercase tracking-wider">Partnerships</p>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Trusted by forward-thinking brands</h1>
      <p class="text-gray-600 max-w-2xl mx-auto">
        We collaborate with companies that are shaping the future of their industries through innovation and excellence.
      </p>
    </div>

<div class="text-center">
      <p class="text-gray-500 text-sm mb-8">Interested in partnering with us?</p>
      <button class="bg-black text-white rounded-lg py-3 px-8 transition hover:bg-gray-800 font-medium">
                Start a Conversation
            </button>
    </div>
  </div>
</body>

</html>

Related Examples

Company icons grid

Author:
Amit Pachange

2 years ago

12.9k
Company icons grid

Author:
Piet Vriend

2 years ago

10.1k
Sponsors section
icon grid

Author:
Sienna

2 years ago

12.7k
Brand icons grid
showcase your 'Happy Customers'.

Author:
Kennedy Mills

2 years ago

10.8k
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

9 months ago

1.5k
Brand Grid with Hover Effect

Author:
ariaw

7 months ago

1k
Logo grid

Author:
ariaw

3 weeks ago

67
Logo grid

Author:
ariaw

3 weeks ago

71
Logo grid

Author:
ariaw

3 weeks ago

120
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

356
Logo grid

Author:
ariaw

2 weeks ago

44
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components