Component:
Logo-cloud SaaS Minimal
Colors:
Description:
This carefully crafted Logo Cloud component is perfect for SaaS landing pages, featuring a Minimal 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: SaaS
@style: Minimal
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
}
/* 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-white);
padding: 3rem 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}
.section-header {
text-align: center;
}
.section-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: 42rem;
margin: 1rem auto 0;
}
.logo-grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: center;
width: 100%;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-image {
height: 2rem;
width: auto;
object-fit: contain;
max-width: 100%;
}
.cta-container {
margin-top: 3rem;
text-align: center;
}
.cta-text {
font-size: 1rem;
color: var(--color-gray-600);
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
background-color: var(--color-white);
border: 1px solid var(--color-gray-300);
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: all 200ms;
}
.cta-button:hover {
background-color: #f9fafb;
color: var(--color-blue-600);
}
.cta-button:focus {
outline: none;
}
.cta-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.logo-cloud-section {
padding: 4rem 0;
}
.container {
padding: 0 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
.logo-grid {
gap: 2rem;
}
}
@media (min-width: 768px) {
.logo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
.logo-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2rem;
}
}
</style>
<!-- Logo Cloud Section -->
<section class="logo-cloud-section">
<!-- Container -->
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">Trusted by innovative companies</h2>
<p class="section-description">Join thousands of leading companies who trust our platform to scale their business.</p>
</div>
<!-- Logo Grid -->
<div class="logo-grid">
<!-- Google Logo -->
<div class="logo-container">
<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>
<!-- Stripe Logo -->
<div class="logo-container">
<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>
<!-- Shopify Logo -->
<div class="logo-container">
<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>
<!-- Slack Logo -->
<div class="logo-container">
<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>
<!-- Notion Logo -->
<div class="logo-container">
<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>
<!-- Dropbox Logo -->
<div class="logo-container">
<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>
<!-- Product Hunt Logo -->
<div class="logo-container">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" width="200" height="72" loading="lazy">
</div>
</div>
<!-- Call to Action -->
<div class="cta-container">
<p class="cta-text">Join over 4,000+ companies already growing with us</p>
<a href="#" class="cta-button" role="button" aria-label="Request demo">
Request demo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<!-- Logo Cloud Section -->
<section class="bg-white py-12 sm:py-16">
<!-- Container -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center">
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Trusted by innovative companies</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600">Join thousands of leading companies who trust our platform to scale their business.</p>
</div>
<!-- Logo Grid -->
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-7">
<!-- Google Logo -->
<!-- Brand logo by Google -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Stripe Logo -->
<!-- Brand logo by Stripe -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Shopify Logo -->
<!-- Brand logo by Shopify -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Slack Logo -->
<!-- Brand logo by Slack -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Notion Logo -->
<!-- Brand logo by Notion -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Dropbox Logo -->
<!-- Brand logo by Dropbox -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Product Hunt Logo -->
<!-- Brand logo by Product Hunt -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" width="200" height="72" loading="lazy">
</div>
</div>
<!-- Call to Action -->
<div class="mt-12 text-center">
<p class="text-base text-gray-600">Join over 4,000+ companies already growing with us</p>
<div class="mt-8">
<a href="#" class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-900 shadow-sm transition duration-200 hover:bg-gray-50 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" role="button" aria-label="Request demo">
Request demo
<svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</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