Component:
Logo-cloud Product Light
Colors:
Description:
This carefully crafted Logo Cloud component is perfect for Product landing pages, featuring a Light 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: Product
@style: Light
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--font-sm: 0.875rem;
--font-base: 1rem;
--font-xl: 1.25rem;
--font-3xl: 1.875rem;
--font-4xl: 2.25rem;
--transition-duration: 200ms;
--max-width-lg: 32rem;
--max-width-7xl: 80rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.logo-cloud-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
overflow: hidden;
}
.container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-12);
}
.section-title {
font-size: var(--font-3xl);
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.section-description {
font-size: var(--font-base);
color: var(--color-gray-600);
max-width: var(--max-width-lg);
margin: 0 auto;
}
.logo-grid {
margin-top: var(--spacing-12);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-4);
width: 100%;
max-width: 100%;
overflow: hidden;
}
.logo-item {
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-2);
width: 100%;
}
.logo-image {
max-width: 100%;
height: auto;
max-height: 2rem;
object-fit: contain;
width: auto;
}
.trust-text {
margin-top: var(--spacing-16);
text-align: center;
}
.trust-description {
font-size: var(--font-sm);
color: var(--color-gray-500);
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-3);
}
.primary-button {
display: inline-flex;
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-blue-400);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: background-color var(--transition-duration);
text-decoration: none;
}
.primary-button:hover {
background-color: var(--color-gray-50);
}
.primary-button svg {
height: 1rem;
width: 1rem;
margin-left: var(--spacing-2);
}
.secondary-button {
display: inline-flex;
align-items: center;
background-color: transparent;
color: var(--color-gray-600);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
transition: color var(--transition-duration);
text-decoration: none;
}
.secondary-button:hover {
color: var(--color-blue-600);
}
.partner-card {
margin-top: var(--spacing-16);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.partner-content {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.partner-info {
text-align: left;
max-width: var(--max-width-lg);
}
.partner-title {
font-size: var(--font-xl);
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.partner-description {
font-size: var(--font-base);
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.logo-cloud-feature-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}
.logo-cloud-feature-item {
display: inline-flex;
align-items: center;
font-size: var(--font-sm);
color: var(--color-gray-600);
}
.logo-cloud-feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-blue-500);
margin-right: var(--spacing-2);
}
.partner-form {
width: 100%;
}
.logo-cloud-form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
justify-content: flex-end;
}
.logo-cloud-form-input {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-3) var(--spacing-4);
outline: none;
font-size: var(--font-base);
}
.logo-cloud-form-input:focus {
border-color: var(--color-blue-400);
box-shadow: 0 0 0 3px var(--color-blue-100);
}
.logo-cloud-submit-button {
background-color: var(--color-blue-600);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: background-color var(--transition-duration);
white-space: nowrap;
min-width: 120px;
font-size: var(--font-base);
}
.logo-cloud-submit-button:hover {
background-color: var(--color-blue-700);
}
/* Responsive styles */
@media (min-width: 640px) {
.container {
padding: 0 var(--spacing-6);
}
.logo-cloud-form-group {
flex-direction: row;
align-items: center;
}
.logo-grid {
gap: var(--spacing-6);
}
.logo-item {
padding: var(--spacing-4);
}
}
@media (min-width: 768px) {
.section-title {
font-size: var(--font-4xl);
}
.logo-grid {
grid-template-columns: repeat(3, 1fr);
}
.partner-content {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.partner-form {
width: auto;
min-width: 400px;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.logo-grid {
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-8);
}
.partner-form {
min-width: 480px;
}
}
</style>
<section class="logo-cloud-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">Trusted by innovative teams worldwide</h2>
<p class="section-description">Join thousands of product teams who have streamlined their workflow with our platform</p>
</div>
<div class="logo-grid">
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" width="200" height="51" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" width="200" height="63" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" width="200" height="93" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" width="200" height="39" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" width="200" height="83" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" width="200" height="70" loading="lazy">
</div>
</div>
<div class="trust-text">
<p class="trust-description">Over 10,000+ companies trust our product to improve their workflow</p>
<div class="cta-buttons">
<a href="#" class="primary-button">
<span>View customer stories</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<a href="#" class="secondary-button">
<span>Become a partner</span>
</a>
</div>
</div>
<div class="partner-card">
<div class="partner-content">
<div class="partner-info">
<h3 class="partner-title">Join our partner program</h3>
<p class="partner-description">Get exclusive benefits and resources to help grow your business with our product solutions.</p>
<div class="logo-cloud-feature-list">
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Priority support
</span>
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Co-marketing opportunities
</span>
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Revenue sharing
</span>
</div>
</div>
<div class="partner-form">
<form class="logo-cloud-form-group">
<input type="email" placeholder="Enter your email" aria-label="Email address" class="logo-cloud-form-input" required>
<button type="submit" class="logo-cloud-submit-button">
Apply now
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Product
@style: Light
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-3">Trusted by innovative teams worldwide</h2>
<p class="text-base text-gray-600 max-w-2xl mx-auto">Join thousands of product teams who have streamlined their workflow with our platform</p>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" width="200" height="51" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" width="200" height="63" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" width="200" height="93" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" width="200" height="39" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" width="200" height="83" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" width="200" height="70" loading="lazy">
</div>
</div>
<div class="mt-16 text-center">
<p class="text-sm text-gray-500 mb-6">Over 10,000+ companies trust our product to improve their workflow</p>
<div class="inline-flex flex-wrap justify-center gap-3">
<a href="#" class="inline-flex items-center bg-white border border-blue-400 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors duration-200">
<span>View customer stories</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<a href="#" class="inline-flex items-center bg-transparent text-gray-600 hover:text-blue-600 px-6 py-3 rounded-lg transition-colors duration-200">
<span>Become a partner</span>
</a>
</div>
</div>
<div class="mt-16 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
<div class="text-left max-w-lg">
<h3 class="text-xl font-medium text-gray-800 mb-3">Join our partner program</h3>
<p class="text-base text-gray-600 mb-6">Get exclusive benefits and resources to help grow your business with our product solutions.</p>
<div class="flex flex-wrap gap-4">
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Priority support
</span>
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Co-marketing opportunities
</span>
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Revenue sharing
</span>
</div>
</div>
<div class="w-full md:w-auto">
<form class="flex flex-col sm:flex-row gap-3">
<input type="email" placeholder="Enter your email" aria-label="Email address" class="bg-white border border-gray-200 rounded-lg px-4 py-3 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none" required>
<button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200">
Apply now
</button>
</form>
</div>
</div>
</div>
</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