Home
Ganesh Salunke
Resizable container

Resizable container

This tailwind example is contributed by Ganesh Salunke, on 01-Jan-2026. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ganesh Salunke

Fork Fullscreen

<div id="stock-panel"
       class="border-r overflow-y-auto"
       style="width: 66%;">
    <div class="h-screen flex flex-col">
      <div id="data-container" class="overflow-x-auto">
      </div>
    </div>
  </div>

<div id="resizer"
       class="w-1 cursor-col-resize bg-gray-300 hover:bg-blue-400">
  </div>

<div id="chart-panel"
       class="bg-white"
       style="width: 34%;">
  </div>

</div>
<script>
const resizer = document.getElementById("resizer");
const left = document.getElementById("stock-panel");
const right = document.getElementById("chart-panel");

let isDragging = false;

resizer.addEventListener("mousedown", () => {
  isDragging = true;
  document.body.classList.add("cursor-col-resize");
});

document.addEventListener("mousemove", (e) => {
  if (!isDragging) return;

const containerWidth = document.getElementById("layout").offsetWidth;
  const leftWidth = e.clientX / containerWidth * 100;
  const rightWidth = 100 - leftWidth;

// Safety limits
  if (leftWidth < 20 || rightWidth < 20) return;

left.style.width = leftWidth + "%";
  right.style.width = rightWidth + "%";

// Optional persistence
  localStorage.setItem("panelWidths", JSON.stringify({
    left: leftWidth,
    right: rightWidth
  }));
});

document.addEventListener("mouseup", () => {
  isDragging = false;
  document.body.classList.remove("cursor-col-resize");
});

// Restore size
const saved = localStorage.getItem("panelWidths");
if (saved) {
  const { left: l, right: r } = JSON.parse(saved);
  left.style.width = l + "%";
  right.style.width = r + "%";
}
</script>

Related Examples

To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

6 months ago

919
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

7 months ago

1.3k
admin panel

Author:
Anonymous

1 year ago

2.6k
chat bar
live chat

Author:
gidy

7 months ago

1.2k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

8 months ago

956
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

7 months ago

565
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.5k
image

Author:
pablitodgb

6 months ago

452
cards
cards with background animation

Author:
Anonymous

1 year ago

3.1k
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

751
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

8 months ago

1.1k
Glassmorphism form

Author:
Sophia Baker

2 years ago

18.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components