Tailwind Logo clouds Components (340)

Logo clouds from Shuffle UX

Four-Logo Customer Trust Strip

A horizontal row of four equal-sized light gray cards, each displaying a company logo (Slack, Dropbox, Spotify, Stripe) centered inside. The strip is used as social proof to build trust, with no text beyond the logos and no interactive controls visible.

<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-lg py-12">
          <img class="h-8 mx-auto" src="mockup-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-lg py-12">
          <img class="h-8 mx-auto" src="mockup-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-lg py-12">
          <img class="h-8 px-3 mx-auto" src="mockup-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="bg-gray-50 rounded-lg py-12">
          <img class="h-8 mx-auto" src="mockup-assets/logos/stripe.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Cronos

Tailwind CSS

Cronos

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

A horizontal row of four company logos centered on a light gray panel, used as social proof on a marketing page. Decorative teal and yellow squares frame the corners of the section.

<section class="py-12">
    <div class="container mx-auto px-4">
        <div class="max-w-sm md:max-w-6xl mx-auto lg:px-24 py-12 md:py-24 relative bg-gray-50">
            <img class="absolute hidden lg:block top-0 left-0 -ml-11 -mt-11" src="cronos-assets/elements/left-squares.svg" alt="">
            <img class="absolute hidden lg:block bottom-0 right-0 -mr-11 -mb-11" src="cronos-assets/elements/right-squares.svg" alt="">
            <div class="flex flex-wrap -m-4">
                <div class="w-full md:w-1/2 lg:w-1/4 p-4 mb-12 lg:mb-0">
                    <img class="block mx-auto max-h-16" src="cronos-assets/logos/brands/slack-color.svg" alt="">
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 p-4 mb-12 lg:mb-0">
                    <img class="block mx-auto max-h-16" src="cronos-assets/logos/brands/dropbox-color.svg" alt="">
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 p-4 mb-12 md:mb-0">
                    <img class="block mx-auto max-h-16" src="cronos-assets/logos/brands/spotify-color.svg" alt="">
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 p-4">
                    <img class="block mx-auto max-h-16" src="cronos-assets/logos/brands/stripe-color.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

Logo clouds from NEUB

Tailwind CSS

NEUB

Four-Up Pink Logo Card Row with Hard Shadows

A horizontal row of four equal-sized pink rectangular cards, each with a black border and offset black drop shadow, containing a single company logo centered inside (Jiggle, Symtric, Wishelp, Resecurb). It reads as a client or partner logo strip with no visible navigation or interactive controls.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-1/2 lg:w-1/4 p-4">
        <div class="bg-pink-500 hover:bg-yellow-300 border-4 border-black py-12 transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
          <img class="h-8 mx-auto" src="neub-assets/logos/jiggle-color.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/4 p-4">
        <div class="bg-pink-500 hover:bg-yellow-300 border-4 border-black py-12 transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
          <img class="h-8 mx-auto" src="neub-assets/logos/symtric-color.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/4 p-4">
        <div class="bg-pink-500 hover:bg-yellow-300 border-4 border-black py-12 transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
          <img class="h-8 px-3 mx-auto" src="neub-assets/logos/wishelp-color.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/4 p-4">
        <div class="bg-pink-500 hover:bg-yellow-300 border-4 border-black py-12 transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
          <img class="h-8 mx-auto" src="neub-assets/logos/resecurb-color.svg" alt="">
        </div>
      </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 Casper

Tailwind CSS

Casper

Dark Blue Hero with Headline and Company Logo Strip

A centered hero section on a dark navy gradient background featuring a large two-line headline 'Over 100+ Company Use Casper', a short subtext paragraph, and a horizontal row of gray partner company logos below. Decorative 3D and star graphics flank the top corners.

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 left-0 z-10 -ml-20 lg:-ml-0 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt="">
    <img class="hidden md:block absolute top-0 right-0 z-10 -mr-20 mt-20 lg:mt-0 w-28 lg:w-auto animate-movePlanet" src="casper-assets/logo-clouds/axe.png" alt="">
    <div class="absolute top-0 right-0 -mt-72 w-148 h-148 bg-gradient-to-t from-blue-500 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative">
      <div class="max-w-4xl mx-auto text-center mb-20">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-3">Over 100+ Company Use Casper</h2>
        <p class="max-w-md mx-auto text-lg text-gray-500">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full sm:w-1/5 px-4 mb-10 sm:mb-0">
          <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons5.svg" alt="">
        </div>
        <div class="w-full sm:w-1/5 px-4 mb-10 sm:mb-0">
          <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons4.svg" alt="">
        </div>
        <div class="w-full sm:w-1/5 px-4 mb-10 sm:mb-0">
          <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons3.svg" alt="">
        </div>
        <div class="w-full sm:w-1/5 px-4 mb-10 sm:mb-0">
          <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons2.svg" alt="">
        </div>
        <div class="w-full sm:w-1/5 px-4">
          <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Mirga

Tailwind CSS

Mirga

Partner logo showcase card with 'Trusted by brands all over' heading

A white rounded card on a light gray background with a small 'Our Partners' label, a large heading 'Trusted by brands all over:', and a horizontal row of partner logos including DocuSign, Maze, and Lander, cropped at the right edge. It uses social proof to build trust in a marketing context.

<section class="bg-neutral-50 py-16">
  <div class="container mx-auto px-4">
    <div class="w-full lg:w-1/2">
      <div class="bg-white rounded-4xl py-10 px-12 overflow-hidden">
        <span class="inline-block text-neutral-600 font-semibold tracking-tight mb-4">Our Partners</span>
        <h6 class="text-5xl font-medium mb-20 md:mb-40 max-w-xs font-heading">Trusted by brands all over:</h6>
        <div class="flex items-center -m-7">
          <div class="flex-shrink-0 p-7">
            <img class="h-9" src="mirga-assets/images/logos/placeholder-logo1.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="h-9" src="mirga-assets/images/logos/placeholder-logo2.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="h-9" src="mirga-assets/images/logos/placeholder-logo3.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="h-9" src="mirga-assets/images/logos/placeholder-logo4.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Flow

Tailwind CSS

Flow

Partner logo strip with trust heading

A horizontal row of grayscale placeholder partner logos beside a short heading reading 'Global partners that trusted us'. It is used to display social proof on a white background.

<section class="py-12 lg:py-24">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
                    <div>
                        <span class="font-medium">Global partners that trusted us</span>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 px-4">
                    <div class="flex flex-wrap justify-between -mx-4">
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-1.svg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Logo clouds from Vista

Tailwind CSS

Vista

Dark Logo Cloud with Tagline

A dark-background section with a short centered tagline and a two-row grid of eight white partner or customer logos. It functions as social proof with no visible navigation, forms, or interactive controls.

<section class="bg-darkPink-900 py-24">
    <div class="container mx-auto px-4">
        <p class="text-center text-white mb-10">Powering financial insights for business owners.</p>
        <div class="flex flex-wrap -m-4 mb-5 lg:mb-10">
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/aurevo-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/syra-logo-light.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/axiomatic-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/lume-logo.svg" alt="">
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/acme-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/lume-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/cronix-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
                <img class="h-8 mx-auto" src="vista-assets/images/logos/syra-logo-light.svg" alt="">
            </div>
        </div>
    </div>
</section>

Logo clouds from Cyber

Tailwind CSS

Cyber

Dark Logo Card Row with Four Company Logos

A horizontal row of four equal-sized dark cards, each containing a white company logo (Jiggle, Symtric, Wishelp, Resecurb) with thin gradient-colored borders. The row is presented on a dark background and reads as a customer or partner logo showcase.

<section class="py-20 relative scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>

        <div class="container px-4 mx-auto relative z-10">
            <div class="flex flex-wrap -m-4">
                <div class="w-1/2 lg:w-1/4 p-4">
                    <div class="relative hologram-effect bg-gradient-to-br from-gray-800 to-gray-950 border-2 border-blue-400 border-opacity-30 hover:border-opacity-100 rounded-lg py-12 transition-all duration-300 transform hover:scale-105 group">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5 group-hover:opacity-10 rounded-lg transition-opacity duration-300"></div>
                        <img class="h-8 mx-auto filter brightness-0 invert group-hover:filter-none transition-all duration-300 animate-pulse" src="cyber-assets/logos/jiggle-color.svg" alt="">
                        <div class="absolute top-2 right-2 w-1 h-1 bg-blue-400 rounded-full animate-pulse opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute bottom-2 left-2 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-0 group-hover:opacity-10 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                    </div>
                </div>
                <div class="w-1/2 lg:w-1/4 p-4">
                    <div class="relative hologram-effect bg-gradient-to-br from-gray-800 to-gray-950 border-2 border-purple-500 border-opacity-30 hover:border-opacity-100 rounded-lg py-12 transition-all duration-300 transform hover:scale-105 group">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-blue-400 to-green-400 opacity-5 group-hover:opacity-10 rounded-lg transition-opacity duration-300"></div>
                        <img class="h-8 mx-auto filter brightness-0 invert group-hover:filter-none transition-all duration-300 animate-pulse delay-75" src="cyber-assets/logos/symtric-color.svg" alt="">
                        <div class="absolute top-2 right-2 w-1 h-1 bg-purple-500 rounded-full animate-pulse opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute bottom-2 left-2 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-500 to-transparent opacity-0 group-hover:opacity-10 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                    </div>
                </div>
                <div class="w-1/2 lg:w-1/4 p-4">
                    <div class="relative hologram-effect bg-gradient-to-br from-gray-800 to-gray-950 border-2 border-green-400 border-opacity-30 hover:border-opacity-100 rounded-lg py-12 transition-all duration-300 transform hover:scale-105 group">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 opacity-5 group-hover:opacity-10 rounded-lg transition-opacity duration-300"></div>
                        <img class="h-8 px-3 mx-auto filter brightness-0 invert group-hover:filter-none transition-all duration-300 animate-pulse delay-150" src="cyber-assets/logos/wishelp-color.svg" alt="">
                        <div class="absolute top-2 right-2 w-1 h-1 bg-green-400 rounded-full animate-pulse opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute bottom-2 left-2 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-green-400 to-transparent opacity-0 group-hover:opacity-10 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                    </div>
                </div>
                <div class="w-1/2 lg:w-1/4 p-4">
                    <div class="relative hologram-effect bg-gradient-to-br from-gray-800 to-gray-950 border-2 border-blue-400 border-opacity-30 hover:border-opacity-100 rounded-lg py-12 transition-all duration-300 transform hover:scale-105 group">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 opacity-5 group-hover:opacity-10 rounded-lg transition-opacity duration-300"></div>
                        <img class="h-8 mx-auto filter brightness-0 invert group-hover:filter-none transition-all duration-300 animate-pulse delay-300" src="cyber-assets/logos/resecurb-color.svg" alt="">
                        <div class="absolute top-2 right-2 w-1 h-1 bg-blue-400 rounded-full animate-pulse opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute bottom-2 left-2 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-0 group-hover:opacity-10 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Logo clouds from FilyTreck

Tailwind CSS

FilyTreck

Dark Split Hero with Trusted Brand Logo Grid

A dark-background section with a bold heading, supporting paragraph, and blue Get started button on the left, paired with a 3x3 grid of rounded tiles displaying brand logos on the right. The layout is a split screen emphasizing social proof through partner or customer logos.

<section class="py-24 md:py-40 bg-black">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">They trusted us</h2>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-normal">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Get started</a>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <div class="flex flex-wrap justify-center -m-8">
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/spotify.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/slack.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 46px;" src="fily-assets/brands/figma.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/apple.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 37px;" src="fily-assets/brands/mastercard.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 41px;" src="fily-assets/brands/microsoft.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 26px;" src="fily-assets/brands/visa.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 32px;" src="fily-assets/brands/brand.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img class="height: 52px;" src="fily-assets/brands/opera.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Logo clouds from Aurora

Tailwind CSS

Aurora

Trusted by the Best Logo Cloud on Dark Background

A dark-background social proof section with the heading 'TRUSTED BY THE BEST' above a two-row, four-column grid of white placeholder company logos. It is used to build trust by showing partner or customer brands.

<section class="py-12 md:py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-10">
      <h5 class="text-white text-sm">TRUSTED BY THE BEST</h5>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-7.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-6.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-8.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-5.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-4.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-3.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-2.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/4 px-4 mb-10">
        <img class="block mx-auto md:mx-0" src="aurora-assets/logo-clouds/logo-white-1.svg" alt="">
      </div>
    </div>
  </div>
</section>

Logo clouds from asitrastudio

Tailwind CSS

asitrastudio

Partners logo section with heading and sponsor link

A light-background section with a large heading "Meet our partners" and a text link "I will become a sponsor" on the left, paired with a two-row grid of eight partner logos (YouTube, Visa, IKEA, Microsoft, Amazon, PayPal) on the right. It functions as a social proof strip for sponsors and partners.

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-5/12 px-4 mb-20 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="font-heading text-6xl sm:text-7xl tracking-tighter mb-10">Meet our partners</h2>
          <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
            <span class="mr-4">I will become a sponsor</span>
            <span class="group-hover:rotate-45 transform transition duration-100">
              <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-7/12 px-4">
        <div class="lg:max-w-2xl ml-auto">
          <div class="flex flex-wrap -mx-4">
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-visa.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-ikea.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-microsoft.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-microsoft.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-amazon.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-paypal.png" alt="">
              </div>
            </div>
            <div class="w-1/2 xs:w-1/4 px-4">
              <div class="flex h-22 items-center">
                <img class="block" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Coleos

Tailwind CSS

Coleos

Logo Strip with Oracle, Google, Meta, and Amazon

A horizontal row of four company logos displayed on a light gray rounded panel, likely used as social proof or customer/partner logos. The logos are evenly spaced with no headings, text, or interactive controls visible.

<section class="relative overflow-hidden py-20">
  <div class="container px-4 mx-auto">
    <div class="bg-coolGray-100 rounded-xl">
      <div class="flex flex-wrap">
        <div class="w-full md:w-1/2 lg:w-1/4">
          <img class="mx-auto" src="coleos-assets/logos/logo-oracle.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4">
          <img class="mx-auto" src="coleos-assets/logos/logo-google-full.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4">
          <img class="mx-auto" src="coleos-assets/logos/logo-meta.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4">
          <img class="mx-auto" src="coleos-assets/logos/logo-amazon.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Logo clouds from Consulty

Tailwind CSS

Consulty

Trusted-by logo strip with 2400+ brands

A centered social-proof section with a short 'Trusted by 2400+ brands & companies worldwide' heading above a horizontal row of five placeholder company logos. It uses a minimal white background to build trust through customer logos.

<div class="py-24 relative overflow-hidden">
    <div class="container mx-auto px-4">
        <p class="tracking-tight text-center text-lg font-medium mb-16">Trusted by 2400+ brands &amp; companies worldwide</p>
        <div class="absolute left-1/2 transform -translate-x-1/2">
            <div class="flex items-center justify-center gap-20">
                <img class="flex-shrink-0 h-10" src="consulty-assets/logos/logoipsum4.svg" alt="">
                <img class="flex-shrink-0 h-10" src="consulty-assets/logos/logoipsum1.svg" alt="">
                <img class="flex-shrink-0 h-10" src="consulty-assets/logos/logoipsum2.svg" alt="">
                <img class="flex-shrink-0 h-10" src="consulty-assets/logos/logoipsum3.svg" alt="">
                <img class="flex-shrink-0 h-10" src="consulty-assets/logos/logoipsum5.svg" alt="">
            </div>
        </div>
    </div>
</div>

Logo clouds from Suncealand

Tailwind CSS

Suncealand

Trust Logo Strip with 'Trusted by 400+ global brands' Heading

A horizontal strip on a cream background with a centered heading reading 'Trusted by 400+ global brands' above a row of five customer logos (Barclays, Spotify, Zoopla, Okta, Miro). It is a social-proof section with no interactive controls.

<section class="py-16 bg-yellowGray-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-center text-sm font-medium mb-12">Trusted by 400+ global brands</h4>
    <div class="flex flex-wrap items-center justify-center -mx-4 -mb-12">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-12">
        <div>
          <img class="block mx-auto" src="suncealand-assets/logos/barclays-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-12">
        <div>
          <img class="block mx-auto" src="suncealand-assets/logos/spotify-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-12">
        <div>
          <img class="block mx-auto" src="suncealand-assets/logos/zoopla-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-12">
        <div>
          <img class="block mx-auto" src="suncealand-assets/logos/okta-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-12">
        <div>
          <img class="block mx-auto" src="suncealand-assets/logos/miro-logo.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 Shuffle UX

Four-Logo Customer Trust Strip

Logo clouds from Cronos

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

Logo clouds from NEUB

Four-Up Pink Logo Card Row with Hard Shadows

Your next website starts here

Logo clouds from Casper

Dark Blue Hero with Headline and Company Logo Strip

Logo clouds from Mirga

Partner logo showcase card with 'Trusted by brands all over' heading

Logo clouds from Flow

Partner logo strip with trust heading

Logo clouds from Vista

Dark Logo Cloud with Tagline

Logo clouds from Cyber

Dark Logo Card Row with Four Company Logos

Logo clouds from FilyTreck

Dark Split Hero with Trusted Brand Logo Grid

Logo clouds from Aurora

Trusted by the Best Logo Cloud on Dark Background

Logo clouds from asitrastudio

Partners logo section with heading and sponsor link

Logo clouds from Coleos

Logo Strip with Oracle, Google, Meta, and Amazon

Logo clouds from Consulty

Trusted-by logo strip with 2400+ brands

Logo clouds from Suncealand

Trust Logo Strip with 'Trusted by 400+ global brands' Heading

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