Logo Clouds
Ready to use Tailwind CSS logo cloud components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Logo clouds are the "as seen in" or "trusted by" strips you've seen on basically every SaaS landing page. They work because social proof is real. We have a few different takes: a simple horizontal row, a grid layout when you have more logos, left-aligned versions, and ones with a short headline above. Light and dark variants for each. The logos in the component are SVG placeholders, just swap them out with your actual logos. Keep them all the same height and they'll line up nicely.
Tailwind
<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><div class="bg-gray-900 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-white 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-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-214.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-216.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-317.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-284.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-311.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-288.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-263.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-220.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-211.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center bg-white/5 p-8">
<img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-325.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none lg:mx-0">
<h2 class="max-w-2xl text-xl font-semibold leading-8 tracking-tight text-gray-900 lg:mx-auto lg:text-center">Trusted by companies across the globe</h2>
<div class="mx-auto mt-8 grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 sm:gap-x-16 lg:grid-cols-5">
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-263.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none lg:mx-0">
<h2 class="max-w-2xl text-xl font-semibold leading-8 tracking-tight text-white lg:mx-auto lg:text-center">Trusted by companies across the globe</h2>
<div class="mx-auto mt-8 grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 sm:gap-x-16 lg:grid-cols-5">
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-white-284.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-white-214.svg" alt="Logoipsum" />
<img class="h-11 max-h-12 w-full object-contain object-left lg:h-12 lg:object-center" src="https://htmlwind.com/assets/images/logo/logoipsum-white-263.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div><div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="mx-auto max-w-2xl text-center text-xl font-semibold leading-8 tracking-tight text-gray-900">Trusted by companies across the globe</h2>
<div class="mt-8 flex justify-center">
<div class="flex w-[40rem] shrink-0 flex-wrap justify-center gap-2 sm:w-[56rem] sm:gap-4">
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-325.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-280.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-317.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-263.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-288.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-282.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-242.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div>
</div><div class="overflow-hidden bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="mx-auto max-w-2xl text-center text-xl font-semibold leading-8 tracking-tight text-white">Trusted by companies across the globe</h2>
<div class="mt-8 flex justify-center">
<div class="flex w-[40rem] shrink-0 flex-wrap justify-center gap-2 sm:w-[56rem] sm:gap-4">
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-325.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-280.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-317.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-284.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-214.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-263.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-288.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-282.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-5 sm:p-8">
<img class="h-7 max-h-10 w-full object-contain sm:h-9" src="https://htmlwind.com/assets/images/logo/logoipsum-white-242.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-xl grid-cols-4 gap-x-8 gap-y-10 sm:grid-cols-6 sm:gap-x-16 lg:max-w-none lg:grid-cols-5">
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1 lg:col-start-auto lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
<img class="col-span-2 col-start-2 h-11 max-h-12 w-full object-contain sm:col-start-4 lg:col-span-1 lg:col-start-auto lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-263.svg" alt="Logoipsum" />
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-xl grid-cols-4 gap-x-8 gap-y-10 sm:grid-cols-6 sm:gap-x-16 lg:max-w-none lg:grid-cols-5">
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain lg:col-span-1 lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-white-284.svg" alt="Logoipsum" />
<img class="col-span-2 h-11 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1 lg:col-start-auto lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-white-214.svg" alt="Logoipsum" />
<img class="col-span-2 col-start-2 h-11 max-h-12 w-full object-contain sm:col-start-4 lg:col-span-1 lg:col-start-auto lg:h-12" src="https://htmlwind.com/assets/images/logo/logoipsum-white-263.svg" alt="Logoipsum" />
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
<div>
<h2 class="text-base font-semibold leading-7 text-pink-500">Our partners</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Trusted by companies across the globe</p>
<p class="mt-6 text-lg leading-8 text-gray-600">Join a worldwide community of businesses that trust our innovative solutions to drive their success and growth every day.</p>
<a href="#" class="mt-8 inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
</div>
<div class="flex items-start justify-start lg:justify-end">
<div class="grid w-full max-w-md grid-cols-3 gap-2">
<div class="col-span-2 flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-325.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-280.svg" alt="Logoipsum" />
</div>
<div class="col-span-2 flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-317.svg" alt="Logoipsum" />
</div>
<div class="col-span-2 flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-gray-500/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-282.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
<div>
<h2 class="text-base font-semibold leading-7 text-pink-500">Our partners</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-white sm:text-5xl">Trusted by companies across the globe</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Join a worldwide community of businesses that trust our innovative solutions to drive their success and growth every day.</p>
<a href="#" class="mt-8 inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
</div>
<div class="flex items-start justify-start lg:justify-end">
<div class="grid w-full max-w-md grid-cols-3 gap-2">
<div class="col-span-2 flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-325.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-280.svg" alt="Logoipsum" />
</div>
<div class="col-span-2 flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-317.svg" alt="Logoipsum" />
</div>
<div class="col-span-2 flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center rounded-xl bg-white/5 p-8">
<img class="h-8 max-h-8 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-white-282.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="max-w-2xl text-xl font-semibold leading-8 tracking-tight text-gray-900">Trusted by companies across the globe</h2>
<div class="mt-8 grid max-w-xl grid-cols-2 gap-x-8 gap-y-10 md:grid-cols-4 md:gap-x-16">
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-325.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-317.svg" alt="Logoipsum" />
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="max-w-2xl text-xl font-semibold leading-8 tracking-tight text-white">Trusted by companies across the globe</h2>
<div class="mt-8 grid max-w-xl grid-cols-2 gap-x-8 gap-y-10 md:grid-cols-4 md:gap-x-16">
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-221.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-284.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-214.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-325.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-329.svg" alt="Logoipsum" />
<img class="h-9 max-h-11 w-full object-contain object-left md:h-11" src="https://htmlwind.com/assets/images/logo/logoipsum-white-317.svg" alt="Logoipsum" />
</div>
</div>
</div>Frequently asked questions
-
Simple horizontal row, multi-row grid, left-aligned grid, and versions with a supporting headline or subtext above the logos. Most come in a light and dark variant.
-
Replace the placeholder SVGs with your actual logo files, SVG works best but PNG or WebP is fine too. Give them all the same Tailwind height class, like h-8, so they look consistent.
-
Yes. Rows wrap or reflow on smaller screens so nothing overflows.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.