Poll results breakdown

Create a survey results block with Tailwind CSS. Use a max-w-2xl card with a question as the heading, a muted line giving the response count and the fieldwork dates, and a small "Multiple answers allowed" note. The results are six rows: each row is a full-width bordered rounded-xl bar container where a tinted fill sits behind the content at the answer percentage, and above it a flex row holding the answer label on the left and the percentage plus raw count on the right in monospace. Make the leading answer use a neutral-900 fill with white text and the rest a light neutral fill with dark text. Under the rows, a small horizontal divider then a two-column footer: a note on the method on the left, and on the right two links for the raw data and the previous wave. Add a small "Change since last wave" column of tiny green or red deltas beside each percentage.

<section class="mx-auto max-w-2xl px-6 py-14">
  <div class="rounded-2xl border border-neutral-200 bg-white p-7">
    <h2 class="text-xl font-semibold tracking-tight text-neutral-900">What slows your team down most?</h2>
    <p class="mt-1.5 text-sm text-neutral-500">912 responses · fieldwork 4–18 July 2026</p>
    <p class="mt-1 text-xs text-neutral-400">Multiple answers allowed, so totals exceed 100%.</p>

    <div class="mt-7 space-y-2.5">
      <div class="relative overflow-hidden rounded-xl border border-neutral-900">
        <div class="absolute inset-y-0 left-0 bg-neutral-900" style="width:61%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm font-medium text-white">Maintaining pipelines nobody owns</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-green-400">+7</span>
            <span class="font-mono font-medium text-white">61% · 556</span>
          </span>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-xl border border-neutral-200">
        <div class="absolute inset-y-0 left-0 bg-neutral-100" style="width:48%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm text-neutral-900">Waiting on another team for access</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-red-600">−3</span>
            <span class="font-mono text-neutral-600">48% · 438</span>
          </span>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-xl border border-neutral-200">
        <div class="absolute inset-y-0 left-0 bg-neutral-100" style="width:44%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm text-neutral-900">Disagreement about metric definitions</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-green-600">+11</span>
            <span class="font-mono text-neutral-600">44% · 401</span>
          </span>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-xl border border-neutral-200">
        <div class="absolute inset-y-0 left-0 bg-neutral-100" style="width:31%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm text-neutral-900">Slow queries and dashboard load times</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-red-600">−9</span>
            <span class="font-mono text-neutral-600">31% · 283</span>
          </span>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-xl border border-neutral-200">
        <div class="absolute inset-y-0 left-0 bg-neutral-100" style="width:22%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm text-neutral-900">Tooling budget and procurement</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-neutral-300">—</span>
            <span class="font-mono text-neutral-600">22% · 201</span>
          </span>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-xl border border-neutral-200">
        <div class="absolute inset-y-0 left-0 bg-neutral-100" style="width:14%"></div>
        <div class="relative flex items-center justify-between px-4 py-3">
          <span class="text-sm text-neutral-900">Something else</span>
          <span class="flex items-center gap-3 text-xs">
            <span class="text-green-600">+2</span>
            <span class="font-mono text-neutral-600">14% · 128</span>
          </span>
        </div>
      </div>
    </div>

    <div class="mt-7 flex flex-wrap items-start justify-between gap-4 border-t border-neutral-200 pt-5">
      <p class="max-w-sm text-xs leading-relaxed text-neutral-400">
        Sample drawn from newsletter subscribers and two community forums; not weighted, so treat it as directional rather than representative.
      </p>
      <div class="flex gap-4 text-xs font-medium">
        <a href="#" class="text-neutral-900 underline-offset-4 hover:underline">Raw data (CSV)</a>
        <a href="#" class="text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Previous wave</a>
      </div>
    </div>
  </div>
</section>