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

pricing
pricing

Author:
Omer fils ELENGA

7 months ago

614
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

1 year ago

2.3k
Websites built to perform beautifully.
We design high-impact websites that convert and scale. From sleek interfaces to full stack experiences, we bring your brand to life online.

Author:
Alif Bima Pradana

1 week ago

6
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.7k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
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.

Author:
Abdul Baset Bappy

10 months ago

971
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.

Author:
Hamza Atig

9 months ago

1.4k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

3 months ago

423
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

8 months ago

440
Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

104
Maintenance page

Author:
Faye

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components