Resizable container

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

Other

Author Ganesh Salunke

Tailwind v3.4 516 3

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

Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

2 months ago

242
Show user details

Lucas Martinez

3 years ago

26.3k
Features Component

KULDEEP

1 year ago

1.5k
rotate card
rotate card

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.4k
Product Grid Skeleton
Responsive product grid skeleton built with Tailwind CSS for e-commerce storefronts and online marketplaces. Features animated image placeholders, product titles, pricing, filter chips, and button placeholders.

JUGENDRA GANGWAR

4 weeks ago

43
tab3
table

Anonymous

1 month ago

85
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

ishimwe prince

1 year ago

1.2k
Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

1 month ago

32
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Muzammil Riaz

1 year ago

1.6k
Collapsible content

Rafferty Kim

3 years ago

14.7k