Weekly Watering Limit Card with Progress Slider

<section class="md:col-span-8 lg:col-span-6 sm:p-5 flex flex-col shadow-black/60 bg-neutral-900 border-white/10 border rounded-3xl pt-4 pr-4 pb-4 pl-4 shadow-lg justify-between">
              <div class="flex items-center justify-between mb-3">
                <div class="">
                  <p class="text-xs font-medium uppercase tracking-[0.14em] text-neutral-400">5-day outlook</p>
                  <p class="text-sm font-medium tracking-tight text-neutral-100">Weather impact on watering</p>
                </div>
                <button class="inline-flex items-center gap-1 rounded-full bg-neutral-800 px-2.5 py-1 text-[11px] text-neutral-100 hover:bg-neutral-700 hover:border-white/20 transition border border-white/10">
                  <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:map-point-bold-duotone" class="iconify h-3.5 w-3.5 iconify--solar"><path fill="currentColor" d="M12 2c-4.418 0-8 4.003-8 8.5c0 4.462 2.553 9.312 6.537 11.174a3.45 3.45 0 0 0 2.926 0C17.447 19.812 20 14.962 20 10.5C20 6.003 16.418 2 12 2" opacity=".5" class=""></path><path fill="currentColor" d="M12 12.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5" class=""></path></svg>
                  Home garden
                </button>
              </div>

              <div class="mt-2 grid grid-cols-5 gap-2">
                <div class="flex flex-col items-center rounded-2xl bg-neutral-800/80 px-2 py-3 border border-white/10">
                  <p class="text-xs text-neutral-300 mb-1">Tue</p>
                  <div class="flex items-center justify-center mb-1">
                    <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:sun-bold-duotone" class="iconify h-4.5 w-4.5 text-amber-300 iconify--solar"><path fill="currentColor" d="M18 12a6 6 0 1 1-12 0a6 6 0 0 1 12 0" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75M1.25 12a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m19 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75M12 20.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M4.398 4.398a.75.75 0 0 1 1.061 0l.393.393a.75.75 0 0 1-1.06 1.06l-.394-.392a.75.75 0 0 1 0-1.06m15.202 0a.75.75 0 0 1 0 1.06l-.392.393a.75.75 0 0 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.06 0m-1.453 13.748a.75.75 0 0 1 1.061 0l.393.393a.75.75 0 0 1-1.06 1.06l-.394-.392a.75.75 0 0 1 0-1.06m-12.295 0a.75.75 0 0 1 0 1.06l-.393.393a.75.75 0 1 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.06 0" opacity=".5" class=""></path></svg>
                  </div>
                  <p class="text-xs font-medium text-neutral-100 mb-1">23°C</p>
                  <span class="text-[10px] text-emerald-300">Normal</span>
                </div>
                <div class="flex flex-col items-center rounded-2xl bg-neutral-800/80 px-2 py-3 border border-white/10">
                  <p class="text-xs text-neutral-300 mb-1">Wed</p>
                  <div class="flex items-center justify-center mb-1">
                    <span class="iconify h-4.5 w-4.5 text-amber-200" data-icon="solar:sun-cloud-bold-duotone"></span>
                  </div>
                  <p class="text-xs font-medium text-neutral-100 mb-1">21°C</p>
                  <span class="text-[10px] text-emerald-300">Slight</span>
                </div>
                <div class="flex flex-col items-center rounded-2xl bg-neutral-800/80 px-2 py-3 border border-white/10">
                  <p class="text-xs text-neutral-300 mb-1">Thu</p>
                  <div class="flex items-center justify-center mb-1">
                    <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:cloud-bold-duotone" class="iconify h-4.5 w-4.5 text-neutral-100 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M22 14.353C22 17.472 19.442 20 16.286 20h-5.787a7.5 7.5 0 0 1 7.487-11.853q.119.422.17.868C20.392 9.78 22 11.881 22 14.353" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M12.476 4C9.32 4 6.762 6.528 6.762 9.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 11.53 2 13.426 2 15.765S3.919 20 6.286 20H10.5a7.5 7.5 0 0 1 7.487-11.853l-.047-.158C17.224 5.68 15.048 4 12.476 4" class=""></path></svg>
                  </div>
                  <p class="text-xs font-medium text-neutral-100 mb-1">19°C</p>
                  <span class="text-[10px] text-emerald-300">Reduced</span>
                </div>
                <div class="flex flex-col items-center rounded-2xl bg-neutral-800/80 px-2 py-3 border border-white/10">
                  <p class="text-xs text-neutral-300 mb-1">Fri</p>
                  <div class="flex items-center justify-center mb-1">
                    <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:cloud-rain-bold-duotone" class="iconify h-4.5 w-4.5 text-sky-300 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M12.03 14.97a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0m4.5 0a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0m-8.5 3.5a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0m9.5 0a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0m-5 1a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M12.03 14.97a.75.75 0 0 1 0 1.06l-2 2a.746.746 0 0 1-1.06 0a.746.746 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0m3.44 0l-2 2a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 1 0-1.06-1.06" class=""></path><path fill="currentColor" d="M16.286 19C19.442 19 22 16.472 22 13.353c0-2.472-1.607-4.573-3.845-5.338C17.837 5.194 15.415 3 12.476 3C9.32 3 6.762 5.528 6.762 8.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 10.53 2 12.426 2 14.765S3.919 19 6.286 19z" opacity=".5" class=""></path></svg>
                  </div>
                  <p class="text-xs font-medium text-neutral-100 mb-1">18°C</p>
                  <span class="text-[10px] text-emerald-300">Paused</span>
                </div>
                <div class="flex flex-col items-center rounded-2xl bg-neutral-800/80 px-2 py-3 border border-white/10">
                  <p class="text-xs text-neutral-300 mb-1">Sat</p>
                  <div class="flex items-center justify-center mb-1">
                    <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:sun-bold-duotone" class="iconify h-4.5 w-4.5 text-amber-300 iconify--solar"><path fill="currentColor" d="M18 12a6 6 0 1 1-12 0a6 6 0 0 1 12 0" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75M1.25 12a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m19 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75M12 20.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M4.398 4.398a.75.75 0 0 1 1.061 0l.393.393a.75.75 0 0 1-1.06 1.06l-.394-.392a.75.75 0 0 1 0-1.06m15.202 0a.75.75 0 0 1 0 1.06l-.392.393a.75.75 0 0 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.06 0m-1.453 13.748a.75.75 0 0 1 1.061 0l.393.393a.75.75 0 0 1-1.06 1.06l-.394-.392a.75.75 0 0 1 0-1.06m-12.295 0a.75.75 0 0 1 0 1.06l-.393.393a.75.75 0 1 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.06 0" opacity=".5" class=""></path></svg>
                  </div>
                  <p class="text-xs font-medium text-neutral-100 mb-1">22°C</p>
                  <span class="text-[10px] text-emerald-300">Normal</span>
                </div>
              </div>
            </section>