Logo cloud - Htmlwind

Grid logo cloud

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

Logo cloud

Author Htmlwind

Tailwind v3.4 1.4k 1

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

Brand icons grid
showcase your 'Happy Customers'.

Kennedy Mills

3 years ago

11.8k
Drinkware landing page

Maxim

1 year ago

2k
Logo grid

ariaw

11 months ago

725
Social Media Icons
Social Media Icons

Aman kumar

2 years ago

3.4k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Banshee

1 year ago

3.5k
Company Logos Showcase
Client showcase with icons

Brandon D

4 years ago

13.4k
Company icons grid

Piet Vriend

3 years ago

10.9k
Sponsors section with icon

Sienna

3 years ago

13.7k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

M Junaid

1 year ago

1.5k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

1 month ago

133
icon
icon

Aman kumar

2 years ago

3.1k