A fully functional desktop operating system simulator running entirely in the browser. No installation, no build tools, no Node.js required.

Built with React 18, Tailwind CSS, and Babel (Standalone).

• Zero-Build Architecture: Just open index.html.
• Window Manager: Drag, resize, minimize, maximize windows.
• Widgets: Custom Widgets (HTML CSS JS) + Already created Kanban Board, Mini IDE, Cryptocurrency Tracker, Breathing Exercise, Water Tracker..
• Persistence: Auto-saves layout and data to localStorage.
• Theming: Dark/Light/Cyberpunk modes via Tailwind configuration.
• Fluid Animations: Custom animations defined in tailwind.config.js.

Ensure your folder looks exactly like this for the paths to work:

/project-root
│
├── index.html              # Entry point (Load scripts & DOM root)
├── css/
│   └── style.css           # Custom scrollbars & body styles
└── js/
    ├── app.jsx             # MAIN LOGIC (Paste the React code here)
    └── tailwind.config.js  # Animation & Theme configuration

Simply double-click index.html to open it in your web browser. (Note: Some browsers might block ES6 modules or specific storage features on file:// protocol. If so, use Method 2).

If you have VS Code, install the "Live Server" extension.

1. Right-click index.html.
2. Select "Open with Live Server".

This file contains the entire OS logic (Window manager, Widgets, State).

• Note: The script tag in HTML is <script type="text/babel" ...> to allow the browser to compile JSX on the fly.

Tailwind is loaded via CDN. The config file extends the theme to add custom animations like the "jiggle" effect (Edit mode).

// Example from js/tailwind.config.js
tailwind.config = {
    theme: {
        extend: {
            animation: {
                jiggle: 'jiggle 0.3s infinite alternate',
            }
        }
    }
}

• React & ReactDOM: Loaded via Unpkg (UMD).
• Babel: Used to transpile JSX inside the browser (@babel/standalone).
• Tailwind: Used via the CDN script, processing classes at runtime.

• Performance: Since Babel compiles JSX in the browser on every load, this setup is perfect for prototyping or personal tools but not recommended for heavy production sites.
• Data: Clearing your browser cache/local storage will reset the desktop.

Open Source. Feel free to modify and distribute.