logosBeginner
Logo Cloud
A row of partner / customer logos for social proof.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a logo cloud with Tailwind: a small uppercase eyebrow ('Trusted by teams at'), then a responsive grid of partner SVG logos in a muted gray color so they don't compete with the rest of the page. Center, equal spacing, optional hover-saturation effect.Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/logo-clouds/1.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-marketing-logos
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class=" w-full">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 gap-px md:grid-cols-4">
<div class="grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 285 40" class="h-8">
<path
fill="#ff500b"
d="M35.235 0c10.494 0 19 8.507 19 19v21a8 8 0 0 1-8-8V19c0-6.075-4.925-11-11-11h-5.2a10 10 0 0 0-7.072 2.929L9.407 24.485a4 4 0 0 0-1.172 2.829V28a4 4 0 0 0 4 4h18a8 8 0 0 1-7.587 7.99l-.413.01h-10c-6.627 0-12-5.373-12-12v-.686a12 12 0 0 1 3.515-8.486L17.307 5.272A18 18 0 0 1 30.034 0z"
/>
<path
fill="#ff500b"
d="M37.235 12a5 5 0 0 1 5 5v23a8 8 0 0 1-8-8V20h-3.343l-6.536 6.535A5 5 0 0 1 20.82 28h-8.107a.47.47 0 0 1-.332-.802l13.733-13.733A5 5 0 0 1 29.65 12z"
/>
<path
fill="#a62f00"
d="M274.819 30.048V17.159a.73.73 0 0 0-.705-.706h-.483a.74.74 0 0 0-.669.446l-4.494 10.623c-.631 1.56-2.154 2.526-3.826 2.526-1.671 0-3.157-.966-3.788-2.526l-4.531-10.623c-.075-.26-.335-.446-.632-.446h-.483a.73.73 0 0 0-.705.706v12.889h-4.197V17.159c0-2.711 2.191-4.94 4.902-4.94h.483c1.969 0 3.751 1.189 4.531 3.046l4.42 10.474 4.42-10.474a4.93 4.93 0 0 1 4.569-3.046h.483c2.711 0 4.902 2.229 4.902 4.94v12.889zm-43.669 0a7.72 7.72 0 0 1-7.726-7.726V12.219h4.197v10.103c0 1.931 1.597 3.528 3.529 3.528h8.914c1.931 0 3.528-1.597 3.528-3.528V12.219h4.197v10.103a7.72 7.72 0 0 1-7.725 7.726zm-15.458-4.198c.705 0 1.3-.594 1.3-1.3 0-.705-.558-1.262-1.226-1.3h-9.917a5.484 5.484 0 0 1-5.497-5.497c0-3.045 2.451-5.534 5.497-5.534h15.377v4.234h-15.377c-.706 0-1.3.595-1.3 1.3s.594 1.3 1.3 1.3h9.991c2.971.075 5.386 2.489 5.386 5.497 0 3.046-2.489 5.497-5.534 5.497h-15.34V25.85zm-38.909 4.198V17.159c0-2.711 2.192-4.94 4.903-4.94h10.808c3.492 0 6.314 2.86 6.314 6.352 0 3.49-2.822 6.35-6.314 6.35H180.98v5.127zm4.197-12.889v3.529h11.514a2.14 2.14 0 0 0 2.117-2.117 2.14 2.14 0 0 0-2.117-2.118h-10.808a.73.73 0 0 0-.706.706m-11.266-4.939h4.197v17.828h-4.197zm-11.119 13.63c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zm-31.782 17.828a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914h12.888v4.234h-12.888c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717h9.471c.706 0 1.3-.594 1.3-1.3 0-.705-.594-1.3-1.3-1.3h-10.177v-4.197h10.177c3.046 0 5.534 2.452 5.534 5.497s-2.488 5.497-5.534 5.497zm-19.216-4.198c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zM74.959 25.145a.73.73 0 0 0 .706.705h15.71v4.197h-15.71a4.9 4.9 0 0 1-4.903-4.902V12.108h4.197zm209.168-13.037a2.155 2.155 0 1 1-4.31 0 2.155 2.155 0 0 1 4.31 0"
/>
</svg>
</div>
<div class="grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 216 40" class="h-8">
<path
fill="#ff1616"
d="M16.658 40h-1.276c-3.317 0-5.312 0-6.836-.284l8.82-11.682zm14.59-.249c-1.498.248-3.46.249-6.63.249H23.11l-.712-11.97zm8.424-8.081a8 8 0 0 1-.233.873 10.9 10.9 0 0 1-3.052 4.655L26.44 26.044zM3.485 37.08a10.9 10.9 0 0 1-2.924-4.537 8 8 0 0 1-.254-.963l13.017-5.534zM40 24.618c0 1.125-.003 2.097-.014 2.951l-11.813-4.563H40zm-28.404-1.612L.011 27.48C0 26.649 0 25.705 0 24.618v-1.612zM24.618 0c4.163 0 6.244 0 7.925.561a10.91 10.91 0 0 1 6.896 6.896c.56 1.681.561 3.762.561 7.925v4.634H27.509l9.01-3.83-2.673-1.774-8.741 3.376 4.103-5.43-2.95-.808-4.532 5.078-.337-5.719h-3.006l-.343 5.72-4.528-5.079-2.95.808 4.099 5.428-8.736-3.374-2.672 1.774 9.007 3.83H0v-4.634c0-4.163 0-6.244.561-7.925A10.91 10.91 0 0 1 7.457.561C9.138.001 11.22 0 15.382 0z"
/>
<path
fill="#280f00"
d="M93.273 31.443c.94 1.763 2.755 2.872 5.094 2.872s4.154-1.109 5.094-2.872h3.518c-1.163 3.522-4.395 5.876-8.612 5.876-4.216 0-7.449-2.354-8.612-5.876zm51.23-18.683c5.36 0 9.115 3.687 9.115 8.978 0 5.6-4.165 8.775-8.569 8.775-2.731 0-5.052-1.23-6.281-3.414v10.173h-3.244v-15.5c0-5.496 3.756-9.012 8.979-9.012m.034 3.004c-3.448 0-5.769 2.458-5.769 5.872s2.321 5.872 5.769 5.872c3.482 0 5.804-2.458 5.804-5.872s-2.322-5.872-5.804-5.872M79.059 12.76c5.325 0 9.08 3.755 9.08 8.876s-3.755 8.877-9.08 8.877-9.081-3.756-9.081-8.877 3.755-8.876 9.08-8.876m0 3.004c-3.483 0-5.804 2.458-5.804 5.872s2.321 5.872 5.804 5.872 5.803-2.458 5.803-5.872-2.321-5.872-5.803-5.872m19.668-2.996h8.821v2.9h-2.276c1.378 1.545 2.175 3.611 2.175 5.968 0 5.12-3.755 8.877-9.08 8.877-5.327 0-9.082-3.756-9.082-8.877s3.756-8.876 9.081-8.876q.181.001.36.008m-.36 2.996c-3.483 0-5.804 2.458-5.805 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872-2.322-5.872-5.804-5.872m19.308-3.004c5.325 0 9.081 3.755 9.081 8.876s-3.756 8.877-9.081 8.877c-5.326 0-9.081-3.756-9.081-8.877s3.755-8.876 9.081-8.876m0 3.004c-3.482 0-5.804 2.458-5.804 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872c-.001-3.414-2.322-5.872-5.804-5.872m44.141-3.004c4.029 0 6.521 2.287 6.589 5.19h-3.21c-.102-1.298-1.296-2.254-3.344-2.255-2.151 0-3.38 1.025-3.38 2.357 0 1.604 1.775 1.774 3.857 2.048 2.936.375 6.52.921 6.521 4.779 0 3.414-2.765 5.633-6.998 5.634-4.234 0-6.897-2.254-6.999-5.327h3.277c.068 1.4 1.366 2.39 3.722 2.39 2.457 0 3.72-1.058 3.72-2.39 0-1.604-1.775-1.81-3.891-2.082-2.936-.376-6.487-.922-6.487-4.78 0-3.311 2.595-5.564 6.623-5.564m12.167 9.25c0 3.654 2.015 5.498 5.087 5.498 3.073 0 5.087-1.844 5.087-5.497v-8.808h3.243v8.808c0 5.599-3.345 8.5-8.33 8.5s-8.33-2.867-8.33-8.5v-8.808h3.243zm-117.5 4.85h12.529v3.208H53V7.741h3.482zm75.959 3.208h-3.243V13.203h3.243zM208.76 12.76c3.96 0 6.965 2.39 6.965 7.545v9.763h-3.244v-9.763c0-3.141-1.672-4.541-4.028-4.541-2.287 0-3.995 1.468-3.995 4.54v9.764h-3.243v-9.763c0-3.073-1.741-4.541-4.028-4.541-2.356 0-4.029 1.4-4.029 4.54v9.764h-3.243v-9.763c0-5.155 3.005-7.545 6.965-7.545 2.594 0 4.779 1.16 5.939 3.345 1.161-2.184 3.312-3.345 5.941-3.345M130.804 6c1.297 0 2.254.956 2.254 2.253s-.957 2.288-2.254 2.288-2.253-.99-2.253-2.288S129.507 6 130.804 6"
/>
</svg>
</div>
<div class="grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 260 40" class="h-8">
<path
fill="#297aff"
d="M33.724 36.58A21.429 21.429 0 0 0 3.419 6.277l7.072 7.071c1.115 1.116 2.917 1.06 4.337.371a8.57 8.57 0 0 1 11.454 11.455c-.69 1.42-.745 3.221.37 4.337z"
/>
<path
fill="#34c2ff"
d="M30 40H19.51a5.7 5.7 0 0 1-4.04-1.674L1.673 24.531A5.7 5.7 0 0 1 0 20.49V10zm-19.286 0H4.286A4.286 4.286 0 0 1 0 35.714v-6.428z"
/>
<path
fill="#0f2d5e"
d="M244.137 6.93c8.44 0 15.311 6.87 15.311 15.31v10.83h-7.469V22.24c0-3.099-1.867-5.788-4.481-7.057V33.07h-7.469V22.24c0-3.1-1.868-5.789-4.482-7.058V33.07h-7.469V6.929h4.108c2.838 0 5.527.822 7.843 2.204V6.929zm-19.025 15.31c0 5.976-4.893 10.83-10.831 10.83-5.975 0-10.83-4.854-10.83-10.83V6.93h7.469v15.31a3.347 3.347 0 0 0 3.361 3.362 3.37 3.37 0 0 0 3.362-3.361V6.929h7.469zm-23.938 2.428c0 4.594-3.735 8.328-8.328 8.328h-11.092v-7.469h11.092a.87.87 0 0 0 .859-.859c0-.448-.411-.821-.859-.821h-3.025a8.43 8.43 0 0 1-8.44-8.44c0-4.669 3.772-8.478 8.44-8.478H200.8v7.47h-10.979c-.56 0-.971.447-.971 1.008 0 .522.411.97.971.97h3.025c4.593 0 8.328 3.735 8.328 8.291M170.441 6.93c5.229 0 9.523 4.294 9.523 9.522 0 5.266-4.294 9.523-9.523 9.523h-2.801v7.096h-7.469V6.929zm0 11.576a2.05 2.05 0 0 0 2.054-2.054c0-1.12-.933-2.054-2.054-2.054h-2.801v4.108zM156.809 33.07h-7.469V6.93h7.469zM147.046 20c0 7.208-5.901 13.07-13.071 13.07-7.208 0-13.071-5.862-13.071-13.07 0-7.17 5.863-13.07 13.071-13.07 7.17 0 13.071 5.9 13.071 13.07m-7.469 0c0-3.062-2.54-5.602-5.602-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-20.846-1.68v14.75h-9.337c-7.207 0-13.07-5.862-13.07-13.07 0-7.17 5.863-13.07 13.07-13.07h9.337v7.468h-9.337c-3.099 0-5.601 2.54-5.601 5.602 0 3.1 2.502 5.602 5.601 5.602h1.868V18.32zM95.113 20c0 7.208-5.9 13.07-13.071 13.07-7.208 0-13.07-5.862-13.07-13.07 0-7.17 5.862-13.07 13.07-13.07 7.17 0 13.07 5.9 13.07 13.07m-7.47 0c0-3.062-2.539-5.602-5.601-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-19.441 5.602v7.469h-9.337a6.694 6.694 0 0 1-6.722-6.722V6.929h7.47v18.673z"
/>
</svg>
</div>
<div class="grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 221 40" class="h-8">
<path
fill="#00dc33"
fill-rule="evenodd"
d="M38.349.937A3.37 3.37 0 0 1 42.97.896l.123.12.42.441c4.248 4.592 5.832 9.943 5.426 15.168-.413 5.3-2.847 10.297-6.242 14.246-3.394 3.947-7.925 7.055-12.822 8.404-4.96 1.366-10.383.93-15.091-2.409-3.993-2.832-5.514-7.41-5.617-11.857-2.24-1.104-4.599-2.476-7.072-4.145l-.654-.446-.14-.101A3.32 3.32 0 0 1 .6 15.779a3.37 3.37 0 0 1 4.525-.931l.145.094.595.407c1.482 1 2.896 1.867 4.24 2.615.868-3.058 2.305-5.994 4.199-8.415 2.836-3.626 7.09-6.526 12.3-6.093 4.693.39 8.16 2.822 9.95 6.255 1.734 3.324 1.76 7.323.245 10.761-1.544 3.506-4.68 6.426-9.19 7.63-3.245.866-7.047.806-11.337-.353v.001a37.4 37.4 0 0 1-5.368-1.928c-.42-.185-.784.099 0 .591 2.21 1.575 5.32 2.895 6.22 3.339a5.7 5.7 0 0 0 1.559 1.687c2.783 1.974 6.04 2.336 9.4 1.41 3.421-.942 6.851-3.214 9.511-6.308 2.658-3.091 4.372-6.795 4.655-10.43.266-3.428-.719-6.95-3.686-10.152l-.293-.308-.117-.127a3.32 3.32 0 0 1 .196-4.587M26.045 10.1c-2.152-.179-4.424.96-6.443 3.54-1.537 1.965-2.7 4.519-3.294 7.147 4.225 1.45 7.374 1.46 9.561.877 2.533-.676 4.051-2.206 4.782-3.865.76-1.726.683-3.607-.055-5.021-.68-1.306-2.05-2.47-4.55-2.678"
clip-rule="evenodd"
/>
<path
fill="#00390e"
d="M137.709 13.603c-1.869 0-3.069-1.41-2.809-3.302C135.16 8.41 136.748 7 138.618 7s3.069 1.41 2.809 3.301-1.848 3.302-3.718 3.302m-5.099 18.535 2.337-16.988h5.099l-2.337 16.988z"
/>
<path
fill="#00390e"
fill-rule="evenodd"
d="m141.573 23.816-2.144 15.578h5.099l1.254-9.113c.846 1.513 2.437 2.304 4.442 2.304 3.808 0 8.547-2.82 9.36-8.734.753-5.468-2.48-9.148-7.817-9.148-5.133 0-9.409 3.405-10.194 9.113m12.873-.172c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126"
clip-rule="evenodd"
/>
<path
fill="#00390e"
d="M166.375 32.585c-4.317 0-6.783-2.338-6.402-5.605h5.031c-.089.894.496 1.341 1.889 1.341 1.564 0 2.15-.55 2.249-1.272.146-1.06-.899-1.22-2.284-1.432l-.005-.001-.295-.046c-2.264-.344-5.991-.928-5.428-5.02.473-3.44 3.49-5.847 7.671-5.847s6.429 2.442 6.11 5.502h-4.963c-.028-.79-.646-1.237-1.666-1.237-1.257 0-1.857.653-1.952 1.34-.135.986.957 1.156 2.387 1.378l.207.032c2.366.344 5.981.998 5.428 5.021-.483 3.508-3.66 5.846-7.977 5.846m28.803-10.007-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.039-3.06 1.496 0 2.475.79 2.162 3.06l-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.005-3.06 1.53 0 2.509.79 2.197 3.06l-1.316 9.56h5.099l1.316-9.56c.752-5.468-2.044-7.875-6.124-7.875-2.413 0-4.513.929-6.016 2.717-1.012-1.788-2.89-2.717-5.27-2.717-4.079 0-7.537 2.407-8.29 7.875m-18.941 1.376c-.79 5.743 2.144 8.631 7.107 8.631s8.696-2.923 9.482-8.631l1.211-8.804h-5.099l-1.211 8.804c-.369 2.682-1.817 3.817-3.721 3.817s-3.039-1.135-2.67-3.817l1.211-8.804h-5.099z"
/>
<path
fill="#00390e"
fill-rule="evenodd"
d="M113.669 23.644c-.709 5.159 2.51 8.941 7.813 8.941s9.562-3.782 10.272-8.94c.71-5.159-2.509-8.942-7.812-8.942s-9.563 3.783-10.273 8.941m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126m-29.153 7.344c-2.06-1.578-3.081-4.206-2.65-7.344.71-5.158 4.97-8.94 10.272-8.94s8.522 3.782 7.813 8.94c-.686 4.983-4.684 8.682-9.734 8.928 1.189.684 2.917 1.237 4.187 1.644.424.136.797.255 1.082.358 1.153.291 1.889 1.378 1.711 2.674-.209 1.52-1.596 2.752-3.099 2.752h-8.16c-3.004 0-5.1-2.464-4.683-5.503h8.702c-1.988-.778-4.09-2.334-5.441-3.509m5.825-3.217c2.311 0 4.107-1.685 4.443-4.127s-.996-4.126-3.308-4.126-4.107 1.685-4.443 4.126.996 4.127 3.308 4.127m-27.36-4.127c-.71 5.159 2.51 8.941 7.812 8.941s9.563-3.782 10.273-8.94c.71-5.159-2.51-8.942-7.813-8.942S76.61 18.486 75.9 23.644m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.131-4.126 4.443-4.126 3.643 1.685 3.308 4.126"
clip-rule="evenodd"
/>
<path fill="#00390e" d="m58 32.138 3.094-22.49h5.507L64.217 26.98H74.72l-.71 5.158z" />
</svg>
</div>
</div>
</div>
</div>
</div>