Logo wall with hover quotes

Build a customer logo wall with Tailwind CSS where each logo reveals a quote on hover. Above the grid, a centred small label and a one-line heading. The grid is five columns on large screens and two on small, each cell a bordered rounded-xl tile with a fixed aspect ratio holding a muted uppercase wordmark centred, and, on hover or focus, an overlay that fades in showing a short quote in small white text on a neutral-900 background with the person name beneath. Include ten tiles. Under the grid, a centred row of three summary figures separated by dots, then a muted line offering the full customer list. Make the overlay keyboard reachable by using a group with focus-within and giving each tile a tabindex, and disable the reveal under a reduced-motion preference by keeping the transition instant rather than removing it.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="text-center">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Customers</p>
    <h2 class="mt-3 text-2xl font-semibold tracking-tight text-neutral-900 sm:text-3xl">Hover any of them to hear why they stayed</h2>
  </div>

  <div class="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Northwind</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Six months in and the bill has not surprised us once."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Jules Park, CTO</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Kestrel</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Sixty-two depots live in a fortnight."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Priya Mahal, Operations</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Fernbrook</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Three days of finance work became a scheduled job."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Aiko Tan, Controller</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Oakline</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"The auditor asked for evidence and I sent a link."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Lena Rask, Compliance</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Meridian</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Eleven seconds to instant. I stopped apologising in meetings."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Hana Brandt, Analytics</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Halden</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"We deleted an internal tool and two cron jobs."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Karl Bergen, Engineering</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Corvid</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"2.1 billion rows over a weekend, zero incidents."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Tom Silva, Data</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Vantage</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Three analysts onboarded and none asked me a question."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Ravi Gopal, Engineering</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Ashgrove</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Our governance lead had no follow-up questions."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Sofia Neri, IG</p>
      </div>
    </div>

    <div tabindex="0" class="group relative grid aspect-[3/2] place-items-center overflow-hidden rounded-xl border border-neutral-200 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <span class="text-sm font-semibold uppercase tracking-widest text-neutral-300 transition group-hover:opacity-0">Studioform</span>
      <div class="absolute inset-0 flex flex-col justify-center bg-neutral-900 p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
        <p class="text-xs leading-relaxed text-white">"Support answered on a Sunday with a query plan."</p>
        <p class="mt-2 text-[10px] text-neutral-400">Dana Køhler, Platform</p>
      </div>
    </div>
  </div>

  <div class="mt-10 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-neutral-500">
    <span><span class="font-medium text-neutral-900">12,400</span> teams</span><span class="text-neutral-300">·</span>
    <span><span class="font-medium text-neutral-900">41</span> countries</span><span class="text-neutral-300">·</span>
    <span><span class="font-medium text-neutral-900">96%</span> renew</span>
  </div>
  <p class="mt-3 text-center text-xs text-neutral-400">
    The full customer list, including the ones who let us name them, is <a href="#" class="underline underline-offset-2 hover:text-neutral-700">here</a>.
  </p>
</section>

<style>
  @media (prefers-reduced-motion: reduce) { .group .transition-opacity { transition-duration: 1ms; } }
</style>