Home
Htmlwind
Logo cloud - Htmlwind

Logo cloud - Htmlwind

Grid logo cloud

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Logo cloud

Author Htmlwind

609

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <h2 class="mx-auto max-w-2xl px-6 text-center text-xl font-semibold leading-8 tracking-tight text-gray-900 sm:px-0">Trusted by companies across the globe</h2>
    <div class="mt-8 grid grid-cols-2 gap-1 overflow-hidden sm:grid-cols-4 sm:rounded-2xl lg:grid-cols-6">
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-216.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-317.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-311.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-288.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-263.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-220.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-211.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-325.svg" alt="Logoipsum" />
      </div>
    </div>
  </div>
</div>

Related Examples