JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Sidebar Navigation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
/*
 * Modern Folder Tree Sidebar Navigation (Connected Lines with Dots)
 * - Explicit +/- Expand/Collapse Icons
 * - Clear Folder/File Iconography for Hierarchy
 * - CONNECTED Vertical & Horizontal Tree Lines with Terminal Dots
 * - Clean, Minimalist Design with Subtle Depth
 */

:root {
    /* --- Core Color Palette (HSL & RGBA for versatility) --- */
    --hue-primary: 210; /* A calm, professional blue */
    --saturation-primary: 90%;
    --lightness-primary: 50%;

    --hue-neutral: 220; /* Soft gray for backgrounds and text */
    --saturation-neutral: 10%;

    /* Primary Accents */
    --clr-primary-hsl: var(--hue-primary) var(--saturation-primary) var(--lightness-primary);
    --clr-primary: hsl(var(--clr-primary-hsl));
    --clr-primary-light: hsl(var(--hue-primary) var(--saturation-primary) 65%);
    --clr-primary-dark: hsl(var(--hue-primary) var(--saturation-primary) 35%);

    /* Neutral Grays */
    --clr-white: hsl(0 0% 100%);
    --clr-black: hsl(0 0% 10%);

    --clr-gray-100: hsl(var(--hue-neutral) var(--saturation-neutral) 98%); /* Very light */
    --clr-gray-200: hsl(var(--hue-neutral) var(--saturation-neutral) 95%);
    --clr-gray-300: hsl(var(--hue-neutral) var(--saturation-neutral) 90%);
    --clr-gray-400: hsl(var(--hue-neutral) var(--saturation-neutral) 75%);
    --clr-gray-500: hsl(var(--hue-neutral) var(--saturation-neutral) 55%);
    --clr-gray-600: hsl(var(--hue-neutral) var(--saturation-neutral) 40%);
    --clr-gray-700: hsl(var(--hue-neutral) var(--saturation-neutral) 25%);
    --clr-gray-800: hsl(var(--hue-neutral) var(--saturation-neutral) 18%);
    --clr-gray-900:...