Quote over product screenshot

Create a testimonial card with Tailwind CSS that overlays a quote on a product screenshot. Build the screenshot from markup: a rounded-2xl dark card with a fake toolbar of three dots and a monospaced path, then a body showing a small stat row and a bar chart of eight columns of varying heights drawn with divs. Over the lower half, lay a white rounded-2xl card with a soft shadow, offset to the left and overlapping the frame edge, holding a quotation mark glyph, a two-sentence quote in medium type, and an attribution row with an avatar, name and role. On the right of the composition, stack three small metric chips vertically, each with a figure and a tiny label, aligned to the frame edge. Ensure the overlay stacks below the frame rather than overlapping on small screens.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="relative">
    <div class="overflow-hidden rounded-2xl bg-neutral-900 shadow-2xl">
      <div class="flex items-center gap-3 border-b border-neutral-800 px-5 py-3">
        <span class="flex gap-1.5">
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-700"></span>
        </span>
        <span class="font-mono text-xs text-neutral-500">studioform / reports / monthly-revenue</span>
      </div>

      <div class="p-7">
        <div class="flex flex-wrap gap-8">
          <div><p class="text-[10px] uppercase tracking-widest text-neutral-500">Revenue</p><p class="mt-1 font-mono text-2xl font-semibold text-white">$284,110</p></div>
          <div><p class="text-[10px] uppercase tracking-widest text-neutral-500">Growth</p><p class="mt-1 font-mono text-2xl font-semibold text-green-400">+4.5%</p></div>
          <div><p class="text-[10px] uppercase tracking-widest text-neutral-500">Accounts</p><p class="mt-1 font-mono text-2xl font-semibold text-white">3,914</p></div>
        </div>

        <div class="mt-8 flex h-40 items-end gap-2.5 pb-24 sm:pb-0">
          <div class="flex-1 rounded-t bg-neutral-700" style="height:48%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:62%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:41%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:75%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:58%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:84%"></div>
          <div class="flex-1 rounded-t bg-neutral-700" style="height:69%"></div>
          <div class="flex-1 rounded-t bg-white" style="height:96%"></div>
        </div>
      </div>
    </div>

    <div class="relative z-10 mt-4 sm:absolute sm:bottom-8 sm:left-8 sm:mt-0 sm:max-w-md">
      <div class="rounded-2xl bg-white p-7 shadow-2xl">
        <p class="text-3xl leading-none text-neutral-300">&ldquo;</p>
        <blockquote class="mt-3 text-lg font-medium leading-snug tracking-tight text-neutral-900">
          The first report I built is still the one the board looks at. Eighteen months later it has never needed a fix.
        </blockquote>
        <div class="mt-5 flex items-center gap-3 border-t border-neutral-100 pt-4">
          <span class="grid h-10 w-10 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">AT</span>
          <div>
            <p class="text-sm font-medium text-neutral-900">Aiko Tan</p>
            <p class="text-xs text-neutral-500">Financial Controller · Fernbrook Health</p>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-4 flex gap-3 sm:absolute sm:bottom-8 sm:right-8 sm:mt-0 sm:flex-col">
      <div class="flex-1 rounded-xl bg-white/95 px-4 py-3 text-center shadow-lg backdrop-blur sm:flex-none">
        <p class="text-lg font-semibold text-neutral-900">18mo</p>
        <p class="text-[10px] uppercase tracking-widest text-neutral-400">Unchanged</p>
      </div>
      <div class="flex-1 rounded-xl bg-white/95 px-4 py-3 text-center shadow-lg backdrop-blur sm:flex-none">
        <p class="text-lg font-semibold text-neutral-900">0</p>
        <p class="text-[10px] uppercase tracking-widest text-neutral-400">Support tickets</p>
      </div>
      <div class="flex-1 rounded-xl bg-white/95 px-4 py-3 text-center shadow-lg backdrop-blur sm:flex-none">
        <p class="text-lg font-semibold text-neutral-900">4 min</p>
        <p class="text-[10px] uppercase tracking-widest text-neutral-400">To build</p>
      </div>
    </div>
  </div>
</section>