<!--
@type: Logo Cloud
@industry: Marketing
@style: Dark Marketing
@category: Social Proof, Branding, Trust
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--gray-300: #d1d5db;
--gray-900: #111827;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--white: #ffffff;
}
* {
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";
}
.logo-cloud {
background-color: var(--gray-900);
padding: 4rem 0;
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.header {
text-align: center;
}
.header h2 {
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--white);
}
.header p {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 1.75;
color: var(--gray-300);
}
.logo-grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 2rem;
align-items: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
padding: 0.5rem;
}
.logo-grid img {
grid-column: span 2;
max-height: 2rem;
width: 100%;
object-fit: contain;
}
.cta-container {
margin-top: 4rem;
display: flex;
justify-content: center;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: var(--blue-600);
color: var(--white);
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--blue-700);
}
.cta-button:focus-visible {
outline: 2px solid var(--blue-600);
outline-offset: 2px;
}
.cta-button svg {
width: 1.25rem;
height: 1.25rem;
}
@media (min-width: 640px) {
.logo-cloud {
padding: 5rem 0;
}
.header h2 {
font-size: 2.25rem;
}
.logo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.logo-grid img {
grid-column: span 1;
max-height: 2.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
.logo-grid {
grid-template-columns: repeat(7, 1fr);
margin-left: 0;
margin-right: 0;
}
.logo-grid img {
grid-column: span 1;
}
}
</style>
<section class="logo-cloud">
<div class="container">
<div class="header">
<h2>Trusted by Industry Leaders</h2>
<p>Join thousands of forward-thinking companies who trust our marketing solutions</p>
</div>
<div class="logo-grid">
<!-- Google logo by Google -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Slack logo by Slack -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo by Stripe -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
<!-- Shopify logo by Shopify -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Notion logo by Notion -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Dropbox logo by Dropbox -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Product Hunt logo by Product Hunt -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
</div>
<div class="cta-container">
<a href="#" class="cta-button" aria-label="Join these companies">
Join these companies
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Marketing
@style: Dark Marketing
@category: Social Proof, Branding, Trust
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Trusted by Industry Leaders</h2>
<p class="mt-4 text-lg leading-8 text-gray-300">Join thousands of forward-thinking companies who trust our marketing solutions</p>
</div>
<div class="bg-white/20 rounded-lg p-2 mx-auto mt-12 grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3 sm:gap-x-10 lg:mx-0 lg:grid-cols-7">
<!-- Google logo by Google -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Slack logo by Slack -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo by Stripe -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
<!-- Shopify logo by Shopify -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Notion logo by Notion -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Dropbox logo by Dropbox -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Product Hunt logo by Product Hunt -->
<img class="col-span-2 max-h-10 sm:max-h-10 max-h-8 w-full object-contain transition lg:col-span-1" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
</div>
<div class="mt-16 flex justify-center">
<a href="#" class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" aria-label="Join these companies">
Join these companies
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
