Tailwind Logo clouds Components (340)

Logo clouds from DarkPro

Dark Logo Strip with Partner Brand Marks

A horizontal row of five white company logos (JIGGLE, SYMTRIC, Wishelp, resecurb, JIGGLE) centered on a near-black background. It functions as a social-proof logo cloud with no visible navigation, text content, or interactive controls.

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="relative flex flex-wrap justify-center -m-4 -mx-6">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
            <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
            <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/symtric-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
            <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/wishelp-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
            <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/resecurb-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
            <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Flaro

Tailwind CSS

Flaro

Powering Next-Gen Companies Logo Grid

A social proof section with a small uppercase heading above a 4x2 grid of white rounded cards, each containing a placeholder company logo. The layout is centered and uses a light gradient background to present customer or partner logos.

<section class="relative pt-28 pb-36 bg-blueGray-100 overflow-hidden">
  <img class="absolute top-0 left-0" src="flaro-assets/images/logos/gradient3.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <p class="mb-14 text-sm text-gray-600 text-center font-semibold uppercase tracking-px">Powering next-gen companies</p>
    <div class="flex flex-wrap max-w-5xl mx-auto -m-3">
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl2.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl3.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl4.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl5.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl6.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl7.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex items-center justify-center py-8 px-9 h-full bg-white rounded-3xl">
          <img class="h-8" src="flaro-assets/logos/brands/logo-xxl8.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Gradia

Tailwind CSS

Gradia

Customer Logo Strip with Heading

A light-background social proof section with a centered heading stating the product is rated well on G2, followed by a grid of five placeholder company logos arranged in two rows. It uses sparse spacing and no interactive controls.

<section class="pt-28 pb-32 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-16 text-2xl text-gray-900 text-center" >Best rated design tool in G2 and loved by world’s best designers</p>
    <div class="flex flex-wrap justify-center -m-10">
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand1.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand2.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand3.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand4.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand5.png" alt=""></div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Logo clouds from Solstice

Tailwind CSS

Solstice

Logo Carousel with Partner Logos Under Heading

A horizontally scrolling, two-row logo carousel with gray placeholder logos in rounded cards, introduced by the caption "Backed by leading education companies". Logos are cropped at both edges, indicating a marquee-style social proof section.

<section class="py-24 overflow-hidden relative">
  <p class="text-center text-lg font-medium text-gray-400 mb-10">Backed by leading education companies</p>
  <div class="h-28 mb-4 transform -translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo5.png" alt="">
      </div>
    </div>
  </div>
  <div class="h-28 transform translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
      </div>
      <div class="w-80 h-28 bg-gray-50 bg-opacity-50 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo5.png" alt="">
      </div>
    </div>
  </div>
</section>

Logo clouds from Basko

Tailwind CSS

Basko

Customer logo strip with 'Millions of businesses use Basko' heading

A centered social-proof section with a heading and a grid of six placeholder customer logos in two rows of three, followed by a short supporting line inviting visitors to join satisfied customers. It uses a plain white background with no interactive controls.

<section class="py-24 lg:pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl text-center mx-auto mb-20">
      <p class="text-3xl font-semibold text-gray-700" style="letter-spacing: -0.5px;">Millions of businesses use Basko</p>
    </div>
    <div class="max-w-2xl mx-auto mb-16">
      <div class="flex flex-wrap justify-center -m-5">
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo6.svg" alt="">
        </div>
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo5.svg" alt="">
        </div>
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo4.svg" alt="">
        </div>
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo3.svg" alt="">
        </div>
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo2.svg" alt="">
        </div>
        <div class="w-auto p-5">
          <img src="basko-assets/images/brands/logo.svg" alt="">
        </div>
      </div>
    </div>
    <p class="text-gray-600 text-center">Join a growing group of satisfied customers who have made the switch.</p>
  </div>
</section>

Logo clouds from Zanrly

Tailwind CSS

Zanrly

Logo Strip Showing Six Placeholder Company Logos

A horizontal row of six placeholder "Logoipsum" company logos inside a light rounded container with a faint border, used to display partner or client logos as social proof. The last logo is cropped at the right edge, suggesting an overflowing carousel or marquee.

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="px-4 bg-white border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap items-center py-11 -m-8">
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand3.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand4.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand5.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand6.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand2.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Nightsable

Tailwind CSS

Nightsable

Dark Logo Strip of Customer Brands

A horizontal row of six grayscale company logos (Royal Bank of Scotland, a dot-grid logo, DRIFT, Seek, Deloitte, Wise) centered on a near-black background. It functions as a social proof or customer logo bar on a marketing page.

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-center -m-6">
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/rbs.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/nine.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/drift.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/seek.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/deloitte.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/wise.png" alt="">
      </div>
    </div>
  </div>
</section>

Logo clouds from Zeus

Tailwind CSS

Zeus

Four-Logo Customer Trust Row with Light Gray Cards

A horizontal row of four equal-sized light gray rounded cards, each containing a muted gray company logo (Slack, Dropbox, Spotify, Stripe). It functions as a social proof or customer logo strip on a light background.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-8 mx-auto" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-8 mx-auto" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-8 px-3 mx-auto" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-8 mx-auto" src="zeus-assets/logo/stripe-gray.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Wrexa

Tailwind CSS

Wrexa

Cloud Backup Hero Section with Integration Logos

A light-themed hero section with a large two-line-plus heading 'Cloud backup solutions for home and business', short supporting text, and a purple 'Learn More' call-to-action button on the left, with floating third-party app logo tiles (Slack, Spotify, Dropbox, Google, and others) arranged on the right. A simple top text link row sits above the hero content.

<section class="relative pt-24 bg-gray-100">
  <img class="hidden lg:block absolute bottom-0 right-0 max-w-2xl 3xl:max-w-3xl" src="wrexa-assets/logos/brands/brands-with-circles.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="sm:flex mb-32 sm:mb-40 lg:mb-64"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0" href="#">Select plan</a><a class="inline-block w-full sm:w-auto" href="#">Start a conversation</a></div>
    <div class="2xl:ml-14 max-w-md md:max-w-lg lg:pb-52">
      <h2 class="font-heading text-4xl sm:text-5xl md:text-6xl mb-14">Cloud backup solutions for home and business</h2>
      <p class="max-w-sm text-gray-800 font-light mb-20">The house like a sense of truth that comes from within. The final game.</p>
      <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Learn More</a>
    </div>
  </div>
  <img class="lg:hidden block mx-auto mt-32" src="wrexa-assets/logos/brands/brands-with-circles.svg" alt="">
</section>

Logo clouds from Zospace

Tailwind CSS

Zospace

Dark Trusted-By Brand Logo Section

A dark-background marketing section with a small blue eyebrow label, a bold multi-line heading 'Trusted by brands all over the world', a short subtext line, and a right-side staggered grid of brand logo cards for Spotify, Wework, Slack, Miro, and Dropbox. Designed to build trust through customer logos.

<section class="pb-24 pt-20 bg-gray-800 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-20 lg:mb-0">
        <div class="lg:max-w-lg">
          <span class="text-lg text-blue-400 font-bold">Clouds</span>
          <h2 class="mt-8 mb-12 text-6xl 2xl:text-7xl font-bold font-heading text-white">Trusted by brands all over the world</h2>
          <p class="text-lg text-gray-200">The brown fox jumps over the lazy dog.</p>
        </div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex justify-center items-center">
          <div class="py-8 px-2 sm:px-6 mr-3 bg-gray-600 rounded-lg">
            <img class="h-16 mx-auto" src="zospace-assets/logos/spotify-box.svg" alt="">
          </div>
          <div class="flex flex-col mr-3">
            <div class="inline-block ml-auto py-12 px-4 sm:px-8 mb-3 bg-gray-600 rounded-lg">
              <img class="h-6 mx-auto" src="zospace-assets/logos/we-box.svg" alt="">
            </div>
            <div class="py-16 px-2 sm:px-12 bg-gray-600 rounded-lg">
              <img class="h-4 md:h-8 mx-auto" src="zospace-assets/logos/slack-box.svg" alt="">
            </div>
          </div>
          <div class="-mb-32">
            <div class="py-8 px-2 sm:px-14 mb-3 bg-gray-600 rounded-lg">
              <img class="h-16 mx-auto" src="zospace-assets/logos/miro-box.svg" alt="">
            </div>
            <div class="inline-block py-14 px-2 sm:px-8 bg-gray-600 rounded-lg">
              <img class="h-6 mx-auto" src="zospace-assets/logos/dropbox-box.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Flex

Tailwind CSS

Flex

Trusted-by logo strip with five company logos

A light gray banner with the caption "Trusted by the top companies in this industry" above a single horizontal row of five company logos: Jiggle, Symtric, Wishelp, Resecurb, and Welytics. The layout is a centered horizontal row used as social proof on a marketing page.

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-300">Trusted by the top companies in this industry</h3>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/welytics-logo.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Logo clouds from Uinel

Tailwind CSS

Uinel

Dark Hero Section with Orbiting Brand Logos and Trusted By Heading

A dark navy hero section with a split layout: a circular orbit graphic on the left displays brand logos (Spotify, Dropbox, Slack, and others) around a central hexagon icon, while the right side presents a "More brands" pill button, a large heading "Trusted by brands all over", and supporting paragraph text. The design uses concentric orbit rings and decorative colored dots for emphasis.

<section class="relative py-24 xl:py-44 bg-darkBlueGray-500 overflow-hidden">
  <div class="ml-auto mb-12 lg:mb-0 md:pl-4 xl:pl-44 w-full md:w-1/2">
    <div class="container px-4 mx-auto">
      <div class="text-center md:text-left sm:max-w-md mx-auto">
        <span class="inline-block py-3 px-7 mt-6 md:mt-0 mb-10 text-lg font-medium font-heading leading-5 text-purple-400 bg-purple-800 bg-opacity-10 border border-purple-400 rounded-6xl">More brands</span>
        <h2 class="mb-10 xl:mb-16 text-9xl xl:text-10xl leading-tight text-white font-heading font-medium">Trusted by brands all over</h2>
        <p class="leading-loose text-blueGray-300 text-opacity-70">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div>
    </div>
  </div>
  <div class="md:absolute top-0 -left-1/2 lg:left-0 lg:h-full w-full lg:w-2/3 xl:w-auto lg:-ml-64">
    <img src="uinel-assets/images/ecommerce-logo-clouds/logos.png" alt="">
  </div>
</section>

Logo clouds from Yofte

Tailwind CSS

Yofte

Client Logo Strip with Grayscale Brand Marks

A horizontal row of six grayscale partner or client logos (Exxon, EA Sports, Eurosport, Nike, Aol., The North Face) on a white background with a light blue-gray panel on the left edge. It functions as a social proof section to build trust, with no navigation, controls, or interactive elements visible.

<section class="relative py-20">
  <div class="absolute top-0 left-0 bottom-0 w-1/12 bg-gray-100"></div>
  <div class="container mx-auto px-4">
    <div class="w-11/12 ml-auto flex flex-wrap -mx-4 -mb-8 justify-between">
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/exxon.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/ea-sports.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/eurosport.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/nike.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/aol.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/north-face.svg" alt="">
      </div>
    </div>
  </div>
</section>

Logo clouds from Shopal

Tailwind CSS

Shopal

Four-Logo Customer Logo Strip with Black Offset Shadows

A horizontal row of four white rounded cards, each with a thick black border and offset black shadow, containing black logos for Slack, Dropbox, Spotify, and Stripe. It functions as a social proof or customer logo section on a marketing page.

<section class="py-6 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-8">
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/slack-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/dropbox-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/spotify-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/stripe-logo.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Nigodo

Tailwind CSS

Nigodo

Trusted-by logo strip with four company logos in outlined cards

A centered heading reading "Trusted by the top companies in this industry" sits above a horizontal row of four equal outlined cards, each containing a logo for Microsoft, Google, Spotify, and Slack. The section uses social proof to build trust through brand recognition.

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/slack.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Atis

Tailwind CSS

Atis

Customer Logo Strip with Slack, Dropbox, Spotify, and Stripe

A horizontal row of four equal-width light gray cards, each containing a brand logo centered: Slack, Dropbox, Spotify, and Stripe. It functions as a social proof section showing recognizable customer or partner logos without text or interactive controls.

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-2">
      <div class="mb-4 w-full md:w-1/2 lg:w-1/4 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-8" src="atis-assets/logo/brands/slack.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/2 lg:w-1/4 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-8" src="atis-assets/logo/brands/dropbox.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/2 lg:w-1/4 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-8" src="atis-assets/logo/brands/spotify.png" alt="">
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-8" src="atis-assets/logo/brands/stripe.png" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Pstls.

Tailwind CSS

Pstls.

Dark Trusted Brands Logo Strip

A full-width black band with a small centered caption reading "Trusted by brands all over the world" above a horizontal row of white brand logos including Coca-Cola, Apple, Champion, and Sony. It functions as a social proof section to build trust.

<section class="py-24 relative">
  <div class="pt-12 pb-36 bg-black relative z-10">
    <div class="container px-4 mx-auto">
      <p class="leading-8 mb-20 text-center text-gray-300" >Trusted by brands all over the world</p>
      
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-14 lg:mb-0"><img class="block mx-auto" src="pstls-assets/logos/coca-cola-w-xl.svg" alt="" ></div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-14 lg:mb-0"><img class="block mx-auto" src="pstls-assets/logos/apple-w-xl.svg" alt="" ></div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-14 md:mb-0"><img class="block mx-auto" src="pstls-assets/logos/champion-w-xl.svg" alt="" ></div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center"><img class="block mx-auto" src="pstls-assets/logos/sony-w-xl.svg" alt="" ></div>
      </div>
    </div>
  </div>
  <div class="absolute top-0 left-0 w-64 h-64 bg-indigo-100"></div>
  <div class="absolute bottom-0 right-0 w-64 h-64 bg-indigo-100"></div>
</section>

Logo clouds from BoldUI

Tailwind CSS

BoldUI

Dark Logo Row with Tilted Oval Frames

A horizontal row of four company logos (Slack, Spotify, Dropbox, Stripe) on a black background, each centered inside a thin tilted oval outline. It functions as a customer or partner logo strip that builds trust through social proof.

<section class="py-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/dropbox.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/stripe.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Acros

Tailwind CSS

Acros

Four-up client logo strip with white tiles

A horizontal row of four equal white tiles on a light gray background, each containing a single brand logo (Slack, Google, Coca-Cola, adidas) centered inside. Used to display customer or partner logos as social proof.

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Bendis

Tailwind CSS

Bendis

Customer Logo Strip with Slack, Dropbox, Spotify, and Stripe

A horizontal row of four brand logos on a white background, used as social proof on a marketing page. The logos are spaced evenly and are not interactive in the visible image.

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe-color.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Showcase your best customers with Tailwind logo clouds components. Skillfully integrate them into your website layout.

Choose from many variations of Tailwind components logo clouds. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Tailwind components logo clouds, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Logo clouds Components

Framework

UI Library

Components

Logo clouds from DarkPro

Dark Logo Strip with Partner Brand Marks

Logo clouds from Flaro

Powering Next-Gen Companies Logo Grid

Logo clouds from Gradia

Customer Logo Strip with Heading

Your next website starts here

Logo clouds from Solstice

Logo Carousel with Partner Logos Under Heading

Logo clouds from Basko

Customer logo strip with 'Millions of businesses use Basko' heading

Logo clouds from Zanrly

Logo Strip Showing Six Placeholder Company Logos

Logo clouds from Nightsable

Dark Logo Strip of Customer Brands

Logo clouds from Zeus

Four-Logo Customer Trust Row with Light Gray Cards

Logo clouds from Wrexa

Cloud Backup Hero Section with Integration Logos

Logo clouds from Zospace

Dark Trusted-By Brand Logo Section

Logo clouds from Flex

Trusted-by logo strip with five company logos

Logo clouds from Uinel

Dark Hero Section with Orbiting Brand Logos and Trusted By Heading

Logo clouds from Yofte

Client Logo Strip with Grayscale Brand Marks

Logo clouds from Shopal

Four-Logo Customer Logo Strip with Black Offset Shadows

Logo clouds from Nigodo

Trusted-by logo strip with four company logos in outlined cards

Logo clouds from Atis

Customer Logo Strip with Slack, Dropbox, Spotify, and Stripe

Logo clouds from Pstls.

Dark Trusted Brands Logo Strip

Logo clouds from BoldUI

Dark Logo Row with Tilted Oval Frames

Logo clouds from Acros

Four-up client logo strip with white tiles

Logo clouds from Bendis

Customer Logo Strip with Slack, Dropbox, Spotify, and Stripe

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support