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 514 2

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

Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.1k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

2 months ago

174
News feed

Bunny

3 years ago

14.2k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Lekhraj Ghimire

1 year ago

1.4k
Forgot password?
you can change password an time

gidy

1 year ago

1k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

7 months ago

772
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Rathanak Phan

1 year ago

2k