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 515 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

button animation
button animation big

QQ-VVN

1 year ago

1.5k
Neon container

Anonymous

2 years ago

4.4k
mailer
gmail style

МОЙДОЫР

11 months ago

775
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Walid Ahmad

2 years ago

2.9k
image

pablitodgb

1 year ago

880
Restaurant menu card

Anonymous

2 years ago

4.4k
Terms of Service Page Template

Anonymous

1 year ago

2.9k
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
Payment success page example

Anonymous

2 months ago

151