devsnips
Search docs, APIs, guides…

Section

Customer Logo Cloud — Vercel

Dark monochrome customer logo cloud with a centered headline, a marquee-free responsive wrap of wordmark-style SVG logos, a count badge, and a pull-quote with avatar. Hairline borders, white/white-40 logo hierarchy, and a single teal accent on the count chip.

  • Section
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Centered headline with count chip
  • White/white-40 logo hierarchy
  • Hairline panel borders
  • Pull-quote with avatar
  • Teal accent on count chip
  • Single teal dot

Preview

Live section

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/sections/saas/logo-cloud/vercel/
fluid · no fixed width 100%
Dependencies: Tailwind CSS (CDN) · Google Fonts: Geist, Geist Mono Responsive

Install

Add to your project

terminal
npx devsnips add Tailwind/Sections/SaaS/logo-cloud/vercel
registry path: Tailwind/Sections/SaaS/logo-cloud/vercel

Source

Implementation

code.html 
<!--
Snippet Name: Customer Logo Cloud — Vercel
Description: Dark monochrome logo cloud with wordmark-style SVG logos, a count chip, and a pull-quote.
Author: DevSnips Contributors
Usage Example: Drop into a "trusted by" section. Replace the inline SVG wordmarks with your customers'.
-->
<section class="relative w-full px-6 py-16 sm:py-20" data-logos="vc">

  <div class="mx-auto max-w-6xl">
    <div class="mb-10 text-center">
      <p class="vc-mono inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/50"><span class="vc-dot"></span> Trusted by 4,200+ teams</p>
      <h2 class="font-g mt-5 text-[30px] font-semibold leading-[1.05] tracking-tight sm:text-[38px]">Powering support at the<br>fastest software companies.</h2>
    </div>

    <!-- Logo grid -->
    <div class="grid grid-cols-2 gap-px overflow-hidden rounded-[14px] border border-white/10 bg-white/[0.07] sm:grid-cols-3 lg:grid-cols-6">
      <!-- Vercel -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 200 50" fill="currentColor" aria-label="Vercel"><path d="M24 4 0 46h48L24 4z"/></svg>
      </div>
      <!-- Linear -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 28" fill="none" stroke="currentColor" stroke-width="2" aria-label="Linear"><path d="M2 14h22M30 6l8 8-8 8M44 14h22M64 4l8 8 8-8"/></svg>
      </div>
      <!-- Raycast -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Raycast"><circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/><path d="M16 6v20M6 16h20"/><circle cx="16" cy="16" r="3"/></svg>
      </div>
      <!-- Resend -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Resend"><path d="M4 6h40l-8 20H12L4 6z"/><path d="M14 10l20 12M34 10 14 22"/></svg>
      </div>
      <!-- Cal.com -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Cal.com"><rect x="4" y="6" width="36" height="22" rx="3"/><path d="M4 13h36M14 4v6M30 4v6"/></svg>
      </div>
      <!-- Pulumi -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Pulumi"><path d="M4 26 16 6l12 20M28 26 40 6l12 20"/></svg>
      </div>
      <!-- second row -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Northbeam"><path d="M6 26V6l28 20V6"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Loop Labs"><circle cx="16" cy="16" r="11"/><path d="M16 5v22M5 16h22"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Myria"><path d="M4 26V10l12 12 12-12v16"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Cortex"><path d="M4 16a12 12 0 0 1 24 0 12 12 0 0 1-24 0z"/><path d="M28 16h8"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Helix"><path d="M6 6c12 0 6 20 18 20M6 26c12 0 6-20 18-20"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Apex"><path d="M6 26 24 4l18 22H6z"/></svg>
      </div>
    </div>

    <!-- Pull-quote -->
    <figure class="mx-auto mt-12 max-w-3xl rounded-[14px] border border-white/10 bg-[#0a0a0a] p-6 sm:p-8">
      <blockquote>
        <p class="font-g text-[18px] leading-relaxed text-white/80 sm:text-[20px]">"We replaced three tools with Flowbase and cut our first-reply time by 71%. The team adopted it in a weekend."</p>
      </blockquote>
      <figcaption class="mt-5 flex items-center gap-3">
        <span class="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] font-g text-[13px] font-semibold text-white">DR</span>
        <div>
          <p class="font-g text-[14px] font-medium text-white">Dana Reyes</p>
          <p class="vc-mono text-[12px] text-white/45">Head of Support · Northbeam</p>
        </div>
      </figcaption>
    </figure>
  </div>
</section>
76 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this section straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://sections/saas/logo-cloud/vercel
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/sections/saas/logo-cloud/vercel/

Install: npx devsnips add
Tailwind/Sections/SaaS/logo-cloud/vercel

This is the Customer Logo Cloud — Vercel — Dark monochrome customer logo cloud with a centered headline, a marquee-free responsive wrap of wordmark-style SVG logos, a count badge, and a pull-quote with avatar. Hairline borders, white/white-40 logo hierarchy, and a single teal accent on the count chip.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://sections/saas/logo-cloud/vercel