sidebar elastico

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 24-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Button Sidebar

Author Raul antonio de la cruz hernandez

416

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Animado</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .sidebar-enter-active, .sidebar-leave-active {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-enter-from, .sidebar-leave-to {
            transform: translateX(100%);
            opacity: 0;
        }
        .resizer {
            width: 10px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            cursor: col-resize;
            z-index: 10;
            background: rgba(156, 163, 175, 0.3);
            transition: background 0.2s ease;
        }
        .resizer:hover {
            background: rgba(59, 130, 246, 0.5);
        }
    </style>
</head>
<body class="flex h-screen bg-gray-100 overflow-hidden">
    
    <div class="flex-1 p-4 overflow-auto">
        <h1 class="text-2xl font-bold mb-4">Contenido Principal</h1>
        <p class="mb-4">Haz clic en el botón para abrir el sidebar derecho.</p>
        <button id="toggleSidebar" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200">
            ☰ Abrir Sidebar
        </button>
    </div>

<div class="p-4 flex-1 overflow-auto">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-gray-800">Menú Principal</h2>
                    <button id="closeSidebar" class="text-gray-500 hover:text-gray-700 transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

<nav class="space-y-1">
                    <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 rounded-lg transition-all duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                        Inicio
                    </a>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 rounded-lg transition-all duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7" />
                        </svg>
                        Perfil
                    </a>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 rounded-lg transition-all duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0" />
                        </svg>
                        Configuración
                    </a>
                </nav>
            </div>

<div class="p-4 border-t">
                <button id="toggleSize" class="w-full flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg transition-all duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                    </svg>
                    Ajustar tamaño
                </button>
            </div>
        </div>
    </div>

const sidebarContainer = document.getElementById('sidebarContainer');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        const toggleSidebarBtn = document.getElementById('toggleSidebar');
        const closeSidebarBtn = document.getElementById('closeSidebar');
        const toggleSizeBtn = document.getElementById('toggleSize');
        const resizer = document.getElementById('resizer');

let isOpen = false;
        let isDragging = false;
        let startX, startWidth;

function toggleSidebar() {
            isOpen = !isOpen;

if (isOpen) {
                sidebarContainer.classList.remove('translate-x-full');
                overlay.classList.remove('opacity-0', 'pointer-events-none');
                overlay.classList.add('opacity-100', 'pointer-events-auto');
            } else {
                sidebarContainer.classList.add('translate-x-full');
                overlay.classList.remove('opacity-100', 'pointer-events-auto');
                overlay.classList.add('opacity-0', 'pointer-events-none');
            }
        }

toggleSidebarBtn.addEventListener('click', toggleSidebar);
        closeSidebarBtn.addEventListener('click', toggleSidebar);
        overlay.addEventListener('click', toggleSidebar);

toggleSizeBtn.addEventListener('click', () => {
            const currentWidth = parseInt(getComputedStyle(sidebar).width);
            sidebar.style.width = currentWidth === 320 ? '480px' : '320px';
        });

resizer.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.clientX;
            startWidth = parseInt(getComputedStyle(sidebar).width);
            document.body.style.cursor = 'col-resize';
            document.addEventListener('mousemove', dragHandler);
            document.addEventListener('mouseup', stopDrag);
        });

function dragHandler(e) {
            if (!isDragging) return;
            const newWidth = startWidth + (startX - e.clientX);
            sidebar.style.width = `${Math.max(280, Math.min(newWidth, 600))}px`;
        }

function stopDrag() {
            isDragging = false;
            document.body.style.cursor = '';
            document.removeEventListener('mousemove', dragHandler);
            document.removeEventListener('mouseup', stopDrag);
        }
    </script>
</body>
</html>

Related Examples

Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

2.6k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

1 month ago

82
shadcn Button
button

Author:
Cristian

1 year ago

2.3k
Border bottom button

Author:
Santos78

2 years ago

12.5k
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

6 months ago

679
Payment Button

Author:
Md. Tofayel islam

1 year ago

3.2k
Sidebar
This HTML file includes: 1. A responsive sidebar with 3D animation effects: 1. The sidebar slides in and out smoothly. 2. Navigation items have a 3D hover effect using CSS transforms and transitions. 2. Tailwind CSS for styling: 1. Included via CDN for easy setup. 2. Used for layout, colors, and basic styling. 3. Custom CSS for animations and 3D effects: 1. Keyframe animations for sidebar open/close. 2. 3D transform effects for nav items. 4. JavaScript for interactivity: 1. Toggles the sidebar open and close. 2. Adds 3D effect to nav items on hover using mouse position. 3. Closes the sidebar when clicking outside. 5. Accessibility features: 1. ARIA label for the toggle button. 2. Keyboard navigation support (Enter/Space to toggle sidebar). 3. Focus trapping within the sidebar when open. 6. Responsive design: 1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views. This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.

Author:
nejaa badr

1 year ago

2.2k
Buttons

Author:
Maxim

11 months ago

1.5k
Elevated buttons

Author:
Leon Bachmann

2 years ago

14.4k
button-neon-purple-super

Author:
Mohammad Rashel

2 weeks ago

137
sidebar
This sidebar implementation 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 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.4k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components