Cost explorer by service

Design a cloud cost dashboard with Tailwind CSS. The header holds a title, a muted month label, a month-picker select and an outline "Set a budget" button. Below, three summary cards: month to date with a large figure and a small delta pill, forecast for the month with a muted note about the method, and budget with a thin track showing the percentage consumed and an amber fill when past eighty percent. Then a table of six services with columns for service, this month, last month, change and a share bar; the change column uses green and red arrows and the share column draws a thin neutral-900 bar with the percentage beside it. Highlight the largest row with a faint background. Under the table, two footnote lines about tax exclusion and the daily refresh time, plus a link to the detailed breakdown.

<section class="bg-neutral-50 px-6 py-10">
  <div class="mx-auto max-w-5xl">
    <div class="flex flex-wrap items-end justify-between gap-4">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight text-neutral-900">Costs</h1>
        <p class="mt-1 text-sm text-neutral-500">August 2026 · 18 days elapsed</p>
      </div>
      <div class="flex gap-2">
        <select class="rounded-xl border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-700 outline-none focus:border-neutral-900">
          <option>August 2026</option><option>July 2026</option><option>June 2026</option>
        </select>
        <button class="rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Set a budget</button>
      </div>
    </div>

    <div class="mt-6 grid gap-4 sm:grid-cols-3">
      <div class="rounded-xl border border-neutral-200 bg-white p-5">
        <p class="text-xs uppercase tracking-widest text-neutral-400">Month to date</p>
        <div class="mt-2 flex items-baseline gap-2">
          <p class="text-2xl font-semibold tracking-tight text-neutral-900">$8,412</p>
          <span class="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-medium text-red-700">+11.4%</span>
        </div>
        <p class="mt-1 text-xs text-neutral-500">Against $7,551 at this point in July</p>
      </div>
      <div class="rounded-xl border border-neutral-200 bg-white p-5">
        <p class="text-xs uppercase tracking-widest text-neutral-400">Forecast</p>
        <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">$14,180</p>
        <p class="mt-1 text-xs text-neutral-500">Linear from the last 7 days of usage</p>
      </div>
      <div class="rounded-xl border border-neutral-200 bg-white p-5">
        <p class="text-xs uppercase tracking-widest text-neutral-400">Budget</p>
        <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">$15,000</p>
        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-neutral-100"><div class="h-full w-[94%] rounded-full bg-amber-400"></div></div>
        <p class="mt-1.5 text-xs text-amber-700">94% of budget forecast to be used</p>
      </div>
    </div>

    <div class="mt-4 overflow-hidden rounded-2xl border border-neutral-200 bg-white">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-neutral-200 bg-neutral-50 text-left text-[11px] uppercase tracking-widest text-neutral-400">
            <th class="px-6 py-3 font-medium">Service</th>
            <th class="px-6 py-3 text-right font-medium">This month</th>
            <th class="hidden px-6 py-3 text-right font-medium sm:table-cell">Last month</th>
            <th class="px-6 py-3 text-right font-medium">Change</th>
            <th class="hidden px-6 py-3 font-medium lg:table-cell">Share</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-neutral-100">
          <tr class="bg-neutral-50/60">
            <td class="px-6 py-3.5 font-medium text-neutral-900">Compute</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$3,910</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$3,402</td>
            <td class="px-6 py-3.5 text-right font-mono text-red-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 14.9%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[46%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">46%</span></div>
            </td>
          </tr>
          <tr>
            <td class="px-6 py-3.5 font-medium text-neutral-900">Object storage</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$1,884</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$1,790</td>
            <td class="px-6 py-3.5 text-right font-mono text-red-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 5.3%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[22%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">22%</span></div>
            </td>
          </tr>
          <tr>
            <td class="px-6 py-3.5 font-medium text-neutral-900">Egress</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$1,120</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$1,402</td>
            <td class="px-6 py-3.5 text-right font-mono text-green-600">↘ 20.1%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[13%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">13%</span></div>
            </td>
          </tr>
          <tr>
            <td class="px-6 py-3.5 font-medium text-neutral-900">Managed Postgres</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$881</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$874</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 0.8%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[10%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">10%</span></div>
            </td>
          </tr>
          <tr>
            <td class="px-6 py-3.5 font-medium text-neutral-900">Observability</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$444</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$388</td>
            <td class="px-6 py-3.5 text-right font-mono text-red-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 14.4%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[5%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">5%</span></div>
            </td>
          </tr>
          <tr>
            <td class="px-6 py-3.5 font-medium text-neutral-900">Other</td>
            <td class="px-6 py-3.5 text-right font-mono text-neutral-900">$173</td>
            <td class="hidden px-6 py-3.5 text-right font-mono text-neutral-400 sm:table-cell">$201</td>
            <td class="px-6 py-3.5 text-right font-mono text-green-600">↘ 13.9%</td>
            <td class="hidden px-6 py-3.5 lg:table-cell">
              <div class="flex items-center gap-2"><div class="h-1.5 w-24 rounded-full bg-neutral-100"><div class="h-full w-[4%] rounded-full bg-neutral-900"></div></div><span class="font-mono text-xs text-neutral-400">4%</span></div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 px-6 py-4 text-xs text-neutral-400">
        <p>Figures exclude tax and any committed-use discounts. Refreshed daily at 06:00 UTC.</p>
        <a href="#" class="font-medium text-neutral-900 underline-offset-4 hover:underline">Detailed breakdown <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
      </div>
    </div>
  </div>
</section>