Component:
Logo-cloud Software Minimal
Colors:
Description:
This carefully crafted Logo Cloud component is perfect for Software 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: Software
@style: Minimal
@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-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
}
* {
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(--color-white);
padding: 3rem 1rem;
}
@media (min-width: 640px) {
.logo-cloud {
padding: 4rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.logo-cloud-header {
max-width: 42rem;
margin: 0 auto;
text-align: center;
}
.header-subtitle {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 1.875rem;
}
}
.logo-grid {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 2rem;
}
@media (min-width: 640px) {
.logo-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.logo-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.logo-item {
display: flex;
align-items: center;
justify-content: center;
}
.logo-image {
height: 2rem;
width: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s;
}
.logo-image:hover {
filter: grayscale(0%);
opacity: 1;
}
.stats {
margin-top: 4rem;
border-top: 1px solid var(--color-gray-200);
padding-top: 2.5rem;
}
.logo-cloud-stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
}
@media (min-width: 640px) {
.logo-cloud-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.logo-cloud-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.stat-item {
background-color: var(--color-gray-50);
padding: 2rem;
}
.stat-value {
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-indigo-600);
}
.stat-label {
margin-top: 0.25rem;
font-size: 1rem;
color: var(--color-gray-600);
}
</style>
<section class="logo-cloud">
<div class="container">
<!-- Section Header -->
<div class="logo-cloud-header">
<h2 class="header-subtitle">Trusted by businesses worldwide</h2>
<p class="header-title">Join thousands of small businesses using our platform</p>
</div>
<!-- Logo Grid -->
<div class="logo-grid">
<!-- Google Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp"
alt="Google"
width="200"
height="83"
loading="lazy"
>
</div>
<!-- Stripe Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp"
alt="Stripe"
width="200"
height="93"
loading="lazy"
>
</div>
<!-- Shopify Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp"
alt="Shopify"
width="200"
height="63"
loading="lazy"
>
</div>
<!-- Slack Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp"
alt="Slack"
width="200"
height="51"
loading="lazy"
>
</div>
<!-- Notion Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp"
alt="Notion"
width="200"
height="70"
loading="lazy"
>
</div>
<!-- Dropbox Logo -->
<div class="logo-item">
<img
class="logo-image"
src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp"
alt="Dropbox"
width="200"
height="39"
loading="lazy"
>
</div>
</div>
<!-- Stats Section -->
<div class="stats">
<div class="logo-cloud-stats-grid">
<div class="stat-item">
<p class="stat-value">4,000+</p>
<p class="stat-label">Small businesses</p>
</div>
<div class="stat-item">
<p class="stat-value">98%</p>
<p class="stat-label">Customer satisfaction</p>
</div>
<div class="stat-item">
<p class="stat-value">$2.5M</p>
<p class="stat-label">Average revenue growth</p>
</div>
<div class="stat-item">
<p class="stat-value">24/7</p>
<p class="stat-label">Customer support</p>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Software
@style: Minimal
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-lg font-semibold text-indigo-600">Trusted by businesses worldwide</h2>
<p class="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Join thousands of small businesses using our platform</p>
</div>
<!-- Logo Grid - Grayscale with hover effect -->
<div class="mt-10">
<div class="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-6">
<!-- Google Logo -->
<!-- Brand logo by Google -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp"
alt="Google"
width="200"
height="83"
loading="lazy"
>
</div>
<!-- Stripe Logo -->
<!-- Brand logo by Stripe -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp"
alt="Stripe"
width="200"
height="93"
loading="lazy"
>
</div>
<!-- Shopify Logo -->
<!-- Brand logo by Shopify -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp"
alt="Shopify"
width="200"
height="63"
loading="lazy"
>
</div>
<!-- Slack Logo -->
<!-- Brand logo by Slack -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp"
alt="Slack"
width="200"
height="51"
loading="lazy"
>
</div>
<!-- Notion Logo -->
<!-- Brand logo by Notion -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp"
alt="Notion"
width="200"
height="70"
loading="lazy"
>
</div>
<!-- Dropbox Logo -->
<!-- Brand logo by Dropbox -->
<div class="flex items-center justify-center">
<img
class="h-8 w-auto object-contain grayscale opacity-60 transition-all duration-300 hover:grayscale-0 hover:opacity-100"
src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp"
alt="Dropbox"
width="200"
height="39"
loading="lazy"
>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="mt-16 border-t border-gray-200 pt-10">
<div class="grid grid-cols-1 gap-0.5 overflow-hidden sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-gray-50 px-8 py-8">
<p class="text-3xl font-bold tracking-tight text-indigo-600">4,000+</p>
<p class="mt-1 text-base text-gray-600">Small businesses</p>
</div>
<div class="bg-gray-50 px-8 py-8">
<p class="text-3xl font-bold tracking-tight text-indigo-600">98%</p>
<p class="mt-1 text-base text-gray-600">Customer satisfaction</p>
</div>
<div class="bg-gray-50 px-8 py-8">
<p class="text-3xl font-bold tracking-tight text-indigo-600">$2.5M</p>
<p class="mt-1 text-base text-gray-600">Average revenue growth</p>
</div>
<div class="bg-gray-50 px-8 py-8">
<p class="text-3xl font-bold tracking-tight text-indigo-600">24/7</p>
<p class="mt-1 text-base text-gray-600">Customer support</p>
</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