Seasonal Water Plan Bar Chart Widget

<section
  class="md:col-span-8 lg:col-span-6 sm:px-6 sm:py-6 flex flex-col shadow-yellow-900/40 min-h-[300px] bg-yellow-400 border-white/15 border rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-lg">
  <div class="flex items-center justify-between mb-4">
    <div class="">
      <p class="text-xs font-medium uppercase tracking-[0.14em] text-yellow-950/80">Water plan</p>
      <h2 class="text-[22px] sm:text-[24px] font-semibold tracking-tight text-yellow-950">Seasonal Adjustment</h2>
    </div>
    <button class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-yellow-300/60 hover:bg-yellow-300/80 transition border border-yellow-200">
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:refresh-circle-bold-duotone" class="iconify h-4.5 w-4.5 text-yellow-950 iconify--solar"><circle cx="12" cy="12" r="10" fill="currentColor" opacity=".5" class=""></circle><path fill="currentColor" d="M7.378 11.63h-.75zm0 .926l-.562.497a.75.75 0 0 0 1.08.044zm2.141-1.015a.75.75 0 0 0-1.038-1.082zm-2.958-1.038a.75.75 0 1 0-1.122.994zm8.37-1.494a.75.75 0 1 0 1.102-1.018zM12.045 6.25c-2.986 0-5.416 2.403-5.416 5.38h1.5c0-2.137 1.747-3.88 3.916-3.88zm-5.416 5.38v.926h1.5v-.926zm1.269 1.467l1.622-1.556l-1.038-1.082l-1.622 1.555zm.042-1.039l-1.378-1.555l-1.122.994l1.377 1.556zm8.094-4.067a5.42 5.42 0 0 0-3.99-1.741v1.5a3.92 3.92 0 0 1 2.889 1.26zm.585 3.453l.56-.498a.75.75 0 0 0-1.08-.043zm-2.139 1.014a.75.75 0 1 0 1.04 1.082zm2.96 1.04a.75.75 0 0 0 1.12-.997zm-8.393 1.507a.75.75 0 0 0-1.094 1.026zm2.888 2.745c2.993 0 5.434-2.4 5.434-5.38h-1.5c0 2.135-1.753 3.88-3.934 3.88zm5.434-5.38v-.926h-1.5v.926zm-1.27-1.467l-1.619 1.555l1.04 1.082l1.618-1.555zm-.04 1.04l1.38 1.554l1.122-.996l-1.381-1.555zM7.952 16.03a5.45 5.45 0 0 0 3.982 1.719v-1.5c-1.143 0-2.17-.48-2.888-1.245z" class=""></path></svg>
                </button>
  </div>

  <div class="flex-1 flex flex-col gap-4">
    <!-- Months scale -->
    <div class="flex items-center justify-between text-[10px] text-yellow-950/80">
      <span class="">Jan</span><span>Feb</span><span>Mar</span><span class="font-medium text-yellow-950">Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span>
    </div>
    <!-- Bars -->
    <div class="mt-1 grid grid-cols-12 gap-1.5 h-28 items-end">
      <div class="rounded-full bg-yellow-900/40 h-[26%]"></div>
      <div class="rounded-full bg-yellow-900/40 h-[32%]"></div>
      <div class="rounded-full bg-yellow-900/40 h-[45%]"></div>
      <div class="rounded-full bg-yellow-50 h-[68%] shadow-md shadow-yellow-900/40 border border-yellow-200/70"></div>
      <div class="rounded-full bg-yellow-900/60 h-[74%]"></div>
      <div class="rounded-full bg-yellow-900/60 h-[80%]"></div>
      <div class="rounded-full bg-yellow-900/60 h-[92%]"></div>
      <div class="rounded-full bg-yellow-900/60 h-[100%]"></div>
      <div class="rounded-full bg-yellow-900/40 h-[77%]"></div>
      <div class="rounded-full bg-yellow-900/30 h-[60%]"></div>
      <div class="rounded-full bg-yellow-900/20 h-[40%]"></div>
      <div class="rounded-full bg-yellow-900/20 h-[34%]"></div>
    </div>

    <!-- Range + percentage -->
    <div class="mt-3 flex items-center justify-between gap-3">
      <div class="flex-1">
        <p class="text-[11px] text-yellow-950/80 mb-1">Current month</p>
        <button class="w-full flex items-center justify-between rounded-2xl bg-yellow-300/70 px-3 py-2 text-xs font-medium text-yellow-950 border border-yellow-600/40 hover:bg-yellow-200/80 hover:border-yellow-700/50">
                      <span>April</span>
                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold-duotone" class="iconify h-3.5 w-3.5 text-yellow-950 iconify--solar"><path fill="currentColor" d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z" class=""></path><path fill="currentColor" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5" class=""></path></svg>
                    </button>
      </div>
      <div class="flex flex-col items-end">
        <p class="text-[11px] text-yellow-950/80 mb-0.5">Water usage target</p>
        <p class="text-lg font-semibold tracking-tight text-yellow-950">72%</p>
      </div>
    </div>
  </div>
</section>