Component:
Logo-cloud Marketing Dark Marketing
Colors:
Description:
This carefully crafted Logo Cloud component is perfect for Marketing landing pages, featuring a 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: 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> 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