Component:
Logo-cloud Business Modern
Colors:
Description:
This carefully crafted Logo Cloud component is perfect for Business landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Logo Cloud
@industry: Business
@style: Modern
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--primary-bg: #f8fafc; /* slate-50 */
--primary-text: #0f172a; /* slate-900 */
--secondary-text: #475569; /* slate-600 */
--button-bg: #4f46e5; /* indigo-600 */
--button-bg-hover: #4338ca; /* indigo-700 */
--button-focus-ring: #c7d2fe; /* indigo-200 */
--placeholder-bg: #e5e7eb; /* gray-200 */
--placeholder-text: #6b7280; /* gray-500 */
--shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
--radius: 0.5rem;
--font-main: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.logo-cloud-section {
background: var(--primary-bg);
padding: 2.5rem 1rem;
font-family: var(--font-main);
}
@media (min-width: 640px) {
.logo-cloud-section {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.logo-cloud-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.logo-cloud-header {
max-width: 56rem;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 2.5rem;
}
.logo-cloud-title {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: var(--primary-text);
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.logo-cloud-title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.logo-cloud-desc {
font-size: 1rem;
line-height: 1.5rem;
color: var(--secondary-text);
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.logo-cloud-desc {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
.logo-cloud-logos {
max-width: 64rem;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: center;
justify-content: center;
}
@media (min-width: 640px) {
.logo-cloud-logos {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.logo-cloud-logos {
grid-template-columns: repeat(4, 1fr);
}
}
.logo-cloud-img {
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
height: 2.5rem;
max-width: 100%;
}
.logo-cloud-img.h-12 {
height: 3rem;
}
.logo-cloud-placeholder {
background: var(--placeholder-bg);
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: var(--placeholder-text);
height: 2.5rem;
}
@media (min-width: 640px) {
.logo-cloud-placeholder {
height: 3rem;
}
}
.logo-cloud-placeholder svg {
width: 2rem;
height: 2rem;
display: block;
}
.logo-cloud-footer {
max-width: 42rem;
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
text-align: center;
}
.logo-cloud-btn {
display: inline-block;
background: var(--button-bg);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
font-weight: 600;
box-shadow: var(--shadow);
text-decoration: none;
transition: background 0.2s;
outline: none;
border: none;
font-size: 1rem;
line-height: 1.5rem;
cursor: pointer;
position: relative;
}
.logo-cloud-btn:hover,
.logo-cloud-btn:focus-visible {
background: var(--button-bg-hover);
}
.logo-cloud-btn:focus {
box-shadow: 0 0 0 2px var(--button-focus-ring);
}
</style>
<section class="logo-cloud-section" aria-label="Logo cloud">
<div class="logo-cloud-header">
<h2 class="logo-cloud-title">Trusted by Leading Businesses</h2>
<p class="logo-cloud-desc">Our solutions empower companies worldwide. Join our network of innovative partners and clients who trust us to deliver excellence every day.</p>
</div>
<div class="logo-cloud-logos" aria-label="Partner logos">
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" width="200" height="39" alt="Dropbox logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" width="200" height="83" alt="Google logo" class="logo-cloud-img h-12" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" width="200" height="70" alt="Notion logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" width="200" height="72" alt="Product Hunt logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" width="200" height="63" alt="Shopify logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" width="200" height="51" alt="Slack logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" width="200" height="93" alt="Stripe logo" class="logo-cloud-img h-12" loading="lazy" />
<div class="logo-cloud-placeholder" aria-label="More partners coming soon">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
</div>
</div>
<div class="logo-cloud-footer">
<a href="#contact" class="logo-cloud-btn" aria-label="Contact sales">Contact Sales</a>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Business
@style: Modern
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-6 lg:px-8 font-inter">
<div class="max-w-4xl mx-auto text-center mb-10">
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Trusted by Leading Businesses</h2>
<p class="text-base sm:text-lg text-slate-600 mb-6">Our solutions empower companies worldwide. Join our network of innovative partners and clients who trust us to deliver excellence every day.</p>
</div>
<div class="max-w-5xl mx-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 items-center justify-center" aria-label="Partner logos">
<!-- Dropbox image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" width="200" height="39" alt="Dropbox logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Google image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" width="200" height="83" alt="Google logo" class="mx-auto h-12 object-contain" loading="lazy" />
<!-- Notion image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" width="200" height="70" alt="Notion logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Product Hunt image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" width="200" height="72" alt="Product Hunt logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Shopify image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" width="200" height="63" alt="Shopify logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Slack image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" width="200" height="51" alt="Slack logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Stripe image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" width="200" height="93" alt="Stripe logo" class="mx-auto h-12 object-contain" loading="lazy" />
<!-- Placeholder for future partner -->
<div class="bg-gray-200 aspect-video flex items-center justify-center rounded-lg text-gray-500 h-10 sm:h-12" aria-label="More partners coming soon">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
</div>
</div>
<div class="max-w-2xl mx-auto mt-10 text-center">
<a href="#contact" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold shadow hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-200" aria-label="Contact sales">Contact Sales</a>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page