JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div class="mobile-overlay"></div>

<div class="sidebar">
    <div class="sidebar-header">
        <div class="title-section">
            <div class="logo-section">
                <img src="https://placehold.co/64x64/012a5b/ffffff?text=Logo" alt="Logo" class="sidebar-logo">
            </div>
        </div>
        <div class="controls-section">
            <button class="header-btn collapse-toggle" title="Collapse Sidebar">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="header-btn mobile-menu-btn" title="Toggle Mobile Menu">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
    </div>

    <nav class="nav-container">
        <ul class="nav-menu folder-level folder-level-0">
            <li class="folder-item">
                <a href="#" class="folder-link">
                    <span class="folder-content">
                        <i class="folder-icon fas fa-folder"></i>
                        <span class="folder-label">My Documents</span>
                    </span>
                    <i class="folder-arrow fas fa-chevron-right"></i>
                </a>
                <ul class="submenu folder-level">
                    <li class="folder-item">
                        <a href="#" class="folder-link">
                            <span class="folder-content">
                                <i class="folder-icon fas fa-folder"></i>
                                <span class="folder-label">Projects</span>
                            </span>
                            <i class="folder-arrow fas fa-chevron-right"></i>
                        </a>
                        <ul class="submenu folder-level">
                            <li class="folder-item">
                                <a href="#"...

CSS

/* --- Base Styles & Variables --- */
:root {
    --sidebar-width-expanded: 300px;
    --sidebar-width-collapsed: 80px;
    --header-footer-min-height: 56px;
    --spacing-xs: 1px;
    --spacing-sm: 5px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --button-size: 36px;
    /* ---[COLORS]--- */
    --color-background: #012a5b;
    --color-text: #ffffff9d;
    --color-text-hover: #ffffff;
    --color-text-secondary: #8a9db8;
    --color-primary-blue: rgba(23, 59, 126, 0.68);
    --color-secondary-blue: rgba(44, 135, 255, 0.68);
    --color-accent-orange: #f97316;
    --color-accent-cyan: #fefe00;
    --color-accent-lime: #a3e635;
    --bgColor-sidebar: linear-gradient(180deg, var(--color-primary-blue) 10%, #020a1c 50%);
    --borderColor-sidebar: rgba(237, 240, 245, 0.3);
    --bgColor-header-footer: linear-gradient(180deg, var(--color-secondary-blue) 10%, #002d63 100%);
    --bgColor-button: linear-gradient(145deg, #1d5097 0%, var(--color-primary-blue) 100%);
    --bgColor-button-hover: linear-gradient(145deg, rgba(33, 83, 133, 0.3) 5%, #0099ff97 100%);
    --bgColor-button-active: #111827;
    /* ---[]--- */
    --main-folder-color: var(--color-accent-orange);
    --subfolder-color: var(--color-accent-cyan);
    --file-color: var(--color-accent-lime);
    --arrow-color: var(--color-text-secondary);
    --menu-label-color: var(--color-text);
    --menu-label-color-hover: var(--color-text-hover);
    --selected-item-bg: linear-gradient(90deg, var(--color-primary-blue) 0%, var(--color-secondary-blue) 100%);
    --selected-item-border: var(--color-primary-blue);
    --tooltip-bg: linear-gradient(145deg, #0284c7 0%, #0369a1 100%);
    --tooltip-text: var(--color-text-hover);
    --scrollbar-thumb: #475569;
    --scrollbar-track: #1a202c;
    --mobile-overlay-bg: rgba(0, 0, 0, 0.7);

    /* MODIFIED: Treeline Variables */
    --treeline-stroke-width: 1px; /*...