Resizable Widget

Widget whose dimensions can change.

html

<section class="resizewidget resizewidget--medium" style="--c:#BFD9F2;" aria-label="Conversion funnel widget">
  <h3 class="resizewidget__title">Conversion funnel</h3>
  <div class="resizewidget__body">Resizable content area</div>
  <span class="resizewidget__handle" aria-hidden="true"></span>
</section>
<style>
.resizewidget { position: relative; border: 1.5px solid #24143018; border-radius: 10px; background: #FAF7F2; font: 13px system-ui, sans-serif; color: #241430; padding: 12px; box-sizing: border-box; }
.resizewidget--small { width: 160px; }
.resizewidget--medium { width: 240px; }
.resizewidget--large { width: 340px; }
.resizewidget--full { width: 100%; max-width: 100%; }
.resizewidget__title { margin: 0 0 8px; font-size: 14px; }
.resizewidget__body { min-height: 60px; opacity: .7; }
.resizewidget__handle { position: absolute; bottom: 4px; right: 4px; width: 10px; height: 10px; border-right: 2px solid var(--c); border-bottom: 2px solid var(--c); cursor: nwse-resize; }
</style>

tailwind

<section class="resizewidget-tw resizewidget-tw--medium relative border-[1.5px] border-[#24143018] rounded-[10px] bg-[#FAF7F2] font-sans text-[13px] text-[#241430] p-3 box-border" style="--c:#BFD9F2;" aria-label="Conversion funnel widget">
  <h3 class="m-0 mb-2 text-sm">Conversion funnel</h3>
  <div class="min-h-[60px] opacity-70">Resizable content area</div>
  <span aria-hidden="true" class="absolute bottom-1 right-1 w-2.5 h-2.5 cursor-nwse-resize" style="border-right:2px solid var(--c);border-bottom:2px solid var(--c);"></span>
</section>
<style>
.resizewidget-tw--small { width: 160px; }
.resizewidget-tw--medium { width: 240px; }
.resizewidget-tw--large { width: 340px; }
.resizewidget-tw--full { width: 100%; max-width: 100%; }
</style>

react

export function ResizableWidget({
  title = "Conversion funnel",
  size = "medium",
  showHandle = true,
  color = "#BFD9F2",
}) {
  const width = { small: 160, medium: 240, large: 340, full: "100%" }[size] ?? 240;
  return (
    <section aria-label={title + " widget"} style={{ position: "relative", border: "1.5px solid #24143018", borderRadius: 10, background: "#FAF7F2", font: "13px system-ui, sans-serif", color: "#241430", padding: 12, boxSizing: "border-box", width }}>
      <h3 style={{ margin: "0 0 8px", fontSize: 14 }}>{title}</h3>
      <div style={{ minHeight: 60, opacity: 0.7 }}>Resizable content area</div>
      {showHandle && (
        <span aria-hidden="true" style={{ position: "absolute", bottom: 4, right: 4, width: 10, height: 10, borderRight: "2px solid " + color, borderBottom: "2px solid " + color, cursor: "nwse-resize" }} />
      )}
    </section>
  );
}