Resize-to-Change-Duration

Resize event to change duration.

html

<div class="resz" data-duration="60 min" style="background:#BFD9F2;">
  <div class="resz__body">
    <p class="resz__title">Focus block</p>
    <p class="resz__meta"><time datetime="2026-08-18T2:00 pm">2:00 pm</time> &middot; <span class="resz__dur">60 min</span></p>
  </div>
  <div class="resz__keys" role="group" aria-label="Change duration of Focus block with keyboard">
    <button type="button" class="resz__btn" aria-label="Decrease duration of Focus block">&minus;</button>
    <button type="button" class="resz__btn" aria-label="Increase duration of Focus block">&plus;</button>
  </div>
  <span class="resz__handle" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 12L12 2M6 12h6V6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</div>
<style>
.resz { position: relative; font: 14px/1.4 system-ui, sans-serif; color: #14351f; width: 320px; padding: 12px 40px 12px 14px; border-radius: 10px; box-sizing: border-box; }
.resz[data-duration="30 min"] { padding-top: 8px; padding-bottom: 8px; }
.resz[data-duration="90 min"] { padding-top: 18px; padding-bottom: 18px; }
.resz__title { margin: 0; font-weight: 700; }
.resz__meta { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.resz__dur { font-weight: 700; }
.resz__keys { display: flex; gap: 6px; margin-top: 8px; }
.resz__btn { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid #14351f55; background: #FAF7F2; cursor: pointer; }
.resz__btn:focus-visible { outline: 2px solid #14351f; outline-offset: 2px; }
.resz__handle { position: absolute; right: 10px; bottom: 8px; color: #14351f88; }
</style>

tailwind

<div class="resz-tw relative w-[320px] p-[12px_40px_12px_14px] rounded-[10px] box-border font-sans text-sm text-[#14351f]" data-duration="60 min" style="background:#BFD9F2">
  <div>
    <p class="m-0 font-bold">Focus block</p>
    <p class="mt-1 mb-0 text-xs opacity-80"><time datetime="2026-08-18T2:00 pm">2:00 pm</time> &middot; <span class="font-bold">60 min</span></p>
  </div>
  <div class="flex gap-1.5 mt-2" role="group" aria-label="Change duration of Focus block with keyboard">
    <button type="button" class="w-[26px] h-[26px] rounded-md border-[1.5px] border-[#14351f55] bg-[#FAF7F2] cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#14351f]" aria-label="Decrease duration of Focus block">&minus;</button>
    <button type="button" class="w-[26px] h-[26px] rounded-md border-[1.5px] border-[#14351f55] bg-[#FAF7F2] cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#14351f]" aria-label="Increase duration of Focus block">&plus;</button>
  </div>
  <span class="absolute right-2.5 bottom-2 text-[#14351f88]" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 12L12 2M6 12h6V6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</div>
<style>
.resz-tw[data-duration="30 min"] { padding-top: 8px; padding-bottom: 8px; }
.resz-tw[data-duration="90 min"] { padding-top: 18px; padding-bottom: 18px; }
</style>

react

export function ResizeToChangeDuration({
  title = "Focus block",
  date = "2026-08-18",
  start = "2:00 pm",
  duration = "60 min",
  accent = "#BFD9F2",
}) {
  const vPad = { "30 min": 8, "60 min": 12, "90 min": 18 }[duration] ?? 12;
  const btn = { width: 26, height: 26, borderRadius: 6, border: "1.5px solid #14351f55", background: "#FAF7F2", cursor: "pointer" };
  return (
    <div style={{ position: "relative", font: "14px/1.4 system-ui, sans-serif", color: "#14351f", width: 320, padding: `${vPad}px 40px ${vPad}px 14px`, borderRadius: 10, boxSizing: "border-box", background: accent }}>
      <div>
        <p style={{ margin: 0, fontWeight: 700 }}>{title}</p>
        <p style={{ margin: "4px 0 0", fontSize: 12, opacity: .8 }}><time dateTime={`${date}T${start}`}>{start}</time> &middot; <span style={{ fontWeight: 700 }}>{duration}</span></p>
      </div>
      <div role="group" aria-label={`Change duration of ${title} with keyboard`} style={{ display: "flex", gap: 6, marginTop: 8 }}>
        <button type="button" style={btn} aria-label={`Decrease duration of ${title}`}>&minus;</button>
        <button type="button" style={btn} aria-label={`Increase duration of ${title}`}>&plus;</button>
      </div>
      <span aria-hidden="true" style={{ position: "absolute", right: 10, bottom: 8, color: "#14351f88" }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 12L12 2M6 12h6V6" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </span>
    </div>
  );
}