machine

A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

This tailwind example is contributed by Gidy Official, on 18-Nov-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats Other Badge

Author Gidy Official

Tailwind v3.4 568

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuantumOS - Pinnacle Edition</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

.liquid-glass {
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5);
        }

.glass-effect {
            position: absolute;
            inset: 0;
            z-index: 1;
            backdrop-filter: blur(8px);
            filter: url(#glass-distortion);
            isolation: isolate;
        }

.glass-tint {
            position: absolute;
            inset: 0;
            z-index: 2;
            background-image: linear-gradient(to top right, var(--glass-bg-start, rgba(30, 25, 25, 0.4)), var(--glass-bg-end, rgba(30, 25, 25, 0.2)));
            border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
            transition: background-image 0.5s ease, border-color 0.5s ease;
        }

.glass-shine {
            position: absolute;
            inset: 0;
            z-index: 3;
            box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 2px 0 rgba(0, 0, 0, 0.2);
        }

.glass-content {
            position: relative;
            z-index: 4;
            height: 100%;
            width: 100%;
        }
/* © 2025 macOS Style Webpage. Created by Hamza Atig - my website: atig.me . This project is a visual recreation inspired by Apple's macOS. All trademarks are property of their respective owners.   */
        .simple-glass {
            backdrop-filter: blur(32px) saturate(180%);
            -webkit-backdrop-filter: blur(32px) saturate(180%);
            background-color: rgba(30, 25, 25, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
            transition: background-color 0.5s ease, border-color 0.5s ease;
        }

.app-window,
        .dropdown-menu {
            position: absolute;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1.5), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1.5);
            will-change: transform, opacity;
        }

.dropdown-menu {
            transform-origin: top;
        }

.hidden-item {
            display: none;
        }

.active-window .liquid-glass {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(96, 165, 250, 0.5);
        }

.drag-handle {
            cursor: grab;
        }

.drag-handle:active {
            cursor: grabbing;
        }

.resize-handle {
            position: absolute;
            width: 1rem;
            height: 1rem;
            bottom: 0;
            right: 0;
            cursor: nwse-resize;
            z-index: 10;
        }

.dock-icon {
            transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1.5), z-index 0s step;
        }

.active-indicator {
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background-color: rgba(230, 230, 255, 0.9);
            border-radius: 9999px;
            box-shadow: 0 0 5px rgba(200, 200, 255, 0.8);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.active-indicator.visible {
            opacity: 1;
        }

@keyframes jiggle {

0%,
            100% {
                transform: translateX(0);
            }

25% {
                transform: translateX(-3px) rotate(-2deg);
            }

75% {
                transform: translateX(3px) rotate(2deg);
            }
        }

.jiggle-animation {
            animation: jiggle 0.3s ease-in-out;
        }

/* CORRECTED & FINAL Photo Grid Styles */

/* Animation now only contains rotation */
        @keyframes smooth-zigzag {

0%,
            100% {
                transform: rotate(-1.5deg);
            }

50% {
                transform: rotate(1.5deg);
            }
        }

.photo-grid {
            perspective: 800px;
            padding: 2rem 1rem;
        }

.photo-item {
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1.5), opacity 0.35s ease;
            position: relative;
        }

/* Make other items flow/recede */
        .photo-grid:hover .photo-item:not(:hover) {
            transform: scale(0.9);
            opacity: 0.6;
        }

/* The container lifts and scales, but does NOT animate */
        .photo-item:hover {
            z-index: 10;
            transform: translateY(-20px) scale(1.15);
        }

.photo-item img {
            transition: box-shadow 0.3s ease;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
        }

/* The image INSIDE the container gets the animation */
        .photo-item:hover img {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            animation: smooth-zigzag 1.8s ease-in-out infinite;
        }

/* The floating side menu */
        .swim-menu {
            position: absolute;
            top: 0;
            /* Sit flush against the parent, eliminating the gap */
            left: 100%;
            width: 216px;
            /* 200px + 1rem margin */
            opacity: 0;
            transform: translateX(-10px);
            transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
            pointer-events: none;
            z-index: 20;
        }

.photo-item:hover .swim-menu {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

.swim-menu-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            font-size: 0.875rem;
            color: #e5e7eb;
            /* text-gray-200 */
            transition: background-color 0.2s, color 0.2s;
            cursor: pointer;
            text-decoration: none;
        }

.swim-menu-item:hover {
            background-color: #3b82f6;
            color: white;
        }

.swim-menu-item svg {
            width: 1.125rem;
            height: 1.125rem;
            margin-right: 0.75rem;
        }
    </style>
</head>

<div id="desktop-container" class="relative min-h-screen">
        <header class="fixed top-0 left-0 right-0 z-[60] h-8 bg-black/30 backdrop-filter backdrop-blur-xl">
            <div class="mx-auto px-4 h-full flex items-center justify-between text-sm text-gray-200">
                <nav class="flex items-center space-x-1"><a href="#" class="nav-item p-1.5 rounded hover:bg-white/10"
                        data-app="about-window"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
                            class="h-5 w-auto text-gray-100" viewBox="0 0 814 1000">
                            <path
                                d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
                                fill="currentColor" />
                        </svg></a><a href="#" class="nav-item font-bold px-2 py-0.5"
                        data-target="finder-menu">Finder</a><a href="#"
                        class="nav-item hover:bg-white/10 rounded px-2 py-0.5" data-target="file-menu">File</a><a
                        href="#" class="nav-item hover:bg-white/10 rounded px-2 py-0.5" data-target="edit-menu">Edit</a>
                </nav>
                <div class="flex items-center space-x-4 text-gray-300"> <span id="current-time"
                        class="font-medium tracking-wide"></span> </div>
            </div>
        </header>

<div id="finder-menu" class="dropdown-menu hidden-item liquid-glass rounded-lg w-56"
            style="top: 35px; left: 60px; z-index: 55;">
            <div class="glass-effect"></div>
            <div class="glass-tint rounded-lg"></div>
            <div class="glass-shine rounded-lg"></div>
            <div class="glass-content p-1"><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white"
                    data-app="about-window">About This OS</a>
                <hr class="border-white/10 my-1"><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">Preferences...</a>
            </div>
        </div>
        <div id="file-menu" class="dropdown-menu hidden-item liquid-glass rounded-lg w-64"
            style="top: 35px; left: 120px; z-index: 55;">
            <div class="glass-effect"></div>
            <div class="glass-tint rounded-lg"></div>
            <div class="glass-shine rounded-lg"></div>
            <div class="glass-content p-1"><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">New Window</a><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">New Folder</a></div>
        </div>
        <div id="edit-menu" class="dropdown-menu hidden-item liquid-glass rounded-lg w-56"
            style="top: 35px; left: 170px; z-index: 55;">
            <div class="glass-effect"></div>
            <div class="glass-tint rounded-lg"></div>
            <div class="glass-shine rounded-lg"></div>
            <div class="glass-content p-1"><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">Cut</a><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">Copy</a><a href="#"
                    class="block px-3 py-1 text-sm rounded hover:bg-blue-500 hover:text-white">Paste</a></div>
        </div>

- Implement a hyper-realistic liquid glass effect.
- Add a fully functional, multi-page App Store.
- Ensure all windows are draggable and resizable.</textarea></div></div>` }, options: { width: 'w-full max-w-3xl', height: 'h-[60vh]' }
            },
            "weather-window": { content: { main: `<div class="p-6 text-center overflow-y-auto h-full"><h2 class="text-3xl font-semibold text-white">Cupertino</h2><p class="text-7xl font-thin text-white my-2">72°</p><p class="text-xl text-gray-300">Mostly Sunny</p><p class="text-lg text-white">H:75° L:58°</p><div class="my-4 overflow-x-auto whitespace-nowrap"><div class="inline-flex space-x-6 p-2">${[...Array(8)].map((_, i) => `<div class="text-center flex-shrink-0"><p class="text-sm">${(new Date().getHours() + i + 1) % 12 || 12} ${new Date().getHours() + i + 1 >= 12 ? 'PM' : 'AM'}</p><svg class="w-8 h-8 mx-auto my-1" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2A1,1,0,0,1,13,3V4A1,1,0,0,1,11,4V3A1,1,0,0,1,12,2M20,11H21A1,1,0,0,1,21,13H20A1,1,0,0,1,20,11M3,11H4A1,1,0,0,1,4,13H3A1,1,0,0,1,3,11M12,7A5,5,0,0,0,7,12A5,5,0,0,0,12,17A5,5,0,0,0,17,12A5,5,0,0,0,12,7M6.34,6.34A1,1,0,0,1,7.76,4.93L8.46,5.64A1,1,0,0,1,7.05,7.05L6.34,6.34M17.66,6.34A1,1,0,0,1,19.07,7.76L18.36,8.46A1,1,0,0,1,16.95,7.05L17.66,6.34M19.07,16.24A1,1,0,0,1,17.66,17.66L16.95,16.95A1,1,0,1,1,18.36,15.54L19.07,16.24M4.93,16.24A1,1,0,0,1,6.34,17.66L7.05,16.95A1,1,0,0,1,5.64,15.54L4.93,16.24M12,20A1,1,0,0,1,11,21V22A1,1,0,0,1,13,22V21A1,1,0,0,1,12,20Z"/></svg><p class="font-bold">${72 + i}°</p></div>`).join('')}</div></div><div class="grid grid-cols-2 gap-4 p-4 border-t border-white/10 text-sm"><div class="p-2 bg-black/10 rounded-lg"><h3>Wind</h3><p class="text-2xl font-semibold">5<span class="text-base">mph</span></p></div><div class="p-2 bg-black/10 rounded-lg"><h3>Humidity</h3><p class="text-2xl font-semibold">45<span class="text-base">%</span></p></div></div></div>` }, options: { width: 'w-full max-w-sm', height: 'auto' } },
            "safari-window": { content: { main: `<div class="flex flex-col h-full"><header class="p-2 flex items-center border-b border-white/10 flex-shrink-0 bg-black/10"><div class="flex space-x-1 text-gray-400"><button class="p-1 rounded-md"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></button></div><div class="flex-grow px-2"><div class="w-full bg-black/20 text-white rounded-lg px-3 py-1 text-sm text-center">google.com</div></div></header><div class="flex-grow bg-white"><iframe src="https://www.google.com/?igu=1" class="w-full h-full border-none" title="Google Search"></iframe></div></div>` }, options: { width: 'w-[80vw]', height: 'h-[85vh]' } },
            "app-store-window": { content: { main: `<div class="p-4 overflow-y-auto h-full"><div class="rounded-lg overflow-hidden mb-6"><img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=800" class="w-full h-48 object-cover"></div><h2 class="text-2xl font-bold mb-2">Editor's Choice</h2><div class="flex space-x-4 overflow-x-auto pb-4">${[{ id: 1, name: 'Photo Editor Pro', cat: 'Graphics & Design', icon: './src/apps/photos.png' }, { id: 2, name: 'Weather Now', cat: 'Utilities', icon: './src/apps/weather.png' }].map(app => `<a href="#" class="flex-shrink-0 w-64 bg-black/10 p-4 rounded-lg hover:bg-white/5 transition-colors" data-navigate-to="app-store-detail-${app.id}"><div class="flex items-center"><img src="${app.icon}" class="w-12 h-12 rounded-lg mr-4"><div class="flex-grow"><h3 class="font-semibold">${app.name}</h3><p class="text-sm text-gray-400">${app.cat}</p></div><button class="bg-blue-600 text-white font-bold py-1 px-4 rounded-full">GET</button></div></a>`).join('')}</div></div>`, 'detail-1': `<div class="page-content h-full overflow-y-auto"><div class="p-4"><button class="text-blue-400 mb-4" data-navigate-to="main">< Back to App Store</button></div><div class="px-4 pb-4"><div class="flex items-center mb-4"><img src="./src/apps/photos.png" class="w-20 h-20 rounded-2xl mr-4"><div class="flex-grow"><h2 class="text-3xl font-bold">Photo Editor Pro</h2><p class="text-gray-400">The ultimate tool for creativity.</p></div><button class="bg-blue-600 text-white font-bold py-2 px-6 rounded-full self-start">GET</button></div></div></div>`, 'detail-2': `<div class="page-content h-full overflow-y-auto"><div class="p-4"><button class="text-blue-400 mb-4" data-navigate-to="main">< Back to App Store</button></div><div class="px-4 pb-4"><div class="flex items-center mb-4"><img src="./src/apps/weather.png" class="w-20 h-20 rounded-2xl mr-4"><div class="flex-grow"><h2 class="text-3xl font-bold">Weather Now</h2><p class="text-gray-400">Your daily forecast.</p></div><button class="bg-blue-600 text-white font-bold py-2 px-6 rounded-full self-start">GET</button></div></div></div>`, }, options: { width: 'w-full max-w-3xl', height: 'h-[80vh]' } },
        };
// © 2025 macOS Style Webpage. Created by Hamza Atig - my website: atig.me . This project is a visual recreation inspired by Apple's macOS. All trademarks are property of their respective owners.  
        const QuantumOS = {
            highestZ: 10, openWindows: new Map(), activeWindowId: null, windowOffset: { x: 0, y: 0 },

init() { document.getElementById('desktop').addEventListener('click', e => { this.handleNavigation(e); this.handleWallpaperChange(e); }); this.initDock(); this.initNavbar(); this.initAdaptiveColors(); this.updateTime(); setInterval(() => this.updateTime(), 1000); },
            initDock() { const dock = document.getElementById('dock-container'); dock.addEventListener('mousemove', e => { dock.querySelectorAll('.dock-icon').forEach(icon => { const r = icon.getBoundingClientRect(); const d = Math.abs((e.clientX - r.left) - r.width / 2); const s = Math.max(1, 1.7 - d / 120); icon.style.transform = `scale(${s}) translateY(${(s - 1) * -25}px)`; icon.style.zIndex = Math.floor(100 - d); }); }); dock.addEventListener('mouseleave', () => dock.querySelectorAll('.dock-icon').forEach(i => { i.style.transform = 'scale(1)'; i.style.zIndex = 'auto'; })); dock.querySelectorAll('.dock-icon').forEach(icon => icon.addEventListener('click', e => { e.preventDefault(); this.openApp(icon.dataset.app, icon); })); },
            initNavbar() { document.querySelectorAll('.nav-item[data-target]').forEach(i => i.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); this.toggleDropdown(i.dataset.target); })); document.querySelectorAll('.dropdown-menu [data-app]').forEach(i => i.addEventListener('click', e => { e.preventDefault(); this.openApp(i.dataset.app, i); })); document.addEventListener('click', () => this.closeAllDropdowns()); },
            toggleDropdown(id) { const menu = document.getElementById(id); const isVisible = !menu.classList.contains('hidden-item'); this.closeAllDropdowns(); if (!isVisible) menu.classList.remove('hidden-item'); },
            closeAllDropdowns() { document.querySelectorAll('.dropdown-menu').forEach(menu => menu.classList.add('hidden-item')); },
            openApp(appId, el) { if (this.openWindows.has(appId)) { this.setActiveWindow(this.openWindows.get(appId).element); return; } const appData = appDB[appId]; if (!appData) { el.classList.add('jiggle-animation'); el.addEventListener('animationend', () => el.classList.remove('jiggle-animation'), { once: true }); return; } const win = document.getElementById('app-window-template').content.cloneNode(true).firstElementChild; win.id = appId; win.classList.add(...appData.options.width.split(' '), ...appData.options.height.split(' ')); win.querySelector('.close-btn').addEventListener('click', e => { e.stopPropagation(); this.closeApp(appId); }); this.windowOffset.x = (this.windowOffset.x + 40) % 320; this.windowOffset.y = (this.windowOffset.y + 40) % 200; win.style.top = `calc(10% + ${this.windowOffset.y}px)`; win.style.left = `calc(10% + ${this.windowOffset.x}px)`; document.getElementById('desktop').appendChild(win); this.openWindows.set(appId, { element: win, currentPage: 'main' }); setTimeout(() => { this.makeDraggable(win); this.makeResizable(win); this.setActiveWindow(win); this.updateDockIndicators(); win.classList.remove('hidden-item'); this.renderAppContent(appId, 'main'); }, 10); },
            renderAppContent(appId, pageKey) { const appState = this.openWindows.get(appId); const win = appState.element; const contentWrapper = win.querySelector('.app-content-wrapper'); const newContentDiv = document.createElement('div'); newContentDiv.className = 'app-content h-full'; newContentDiv.innerHTML = appDB[appId].content[pageKey]; contentWrapper.innerHTML = ''; contentWrapper.appendChild(newContentDiv); setTimeout(() => { newContentDiv.querySelectorAll('.stagger-item').forEach((item, index) => { setTimeout(() => item.classList.add('visible'), index * 30); }); }, 10); appState.currentPage = pageKey; },
            handleNavigation(e) { const navEl = e.target.closest('[data-navigate-to]'); if (!navEl) return; e.preventDefault(); const winEl = navEl.closest('.app-window'); const appId = winEl.id; const targetPage = navEl.dataset.navigateTo; const contentWrapper = winEl.querySelector('.app-content-wrapper'); const currentContent = contentWrapper.firstElementChild; currentContent.style.opacity = 0; setTimeout(() => this.renderAppContent(appId, targetPage), 200); },
            handleWallpaperChange(e) { const wallpaperBtn = e.target.closest('[data-set-wallpaper-src]'); if (!wallpaperBtn) return; e.preventDefault(); const url = wallpaperBtn.dataset.setWallpaperSrc; this.setWallpaper(url); },
            setWallpaper(url) { document.body.style.backgroundImage = `url('${url}')`; document.getElementById('bg-image-source').src = url; this.initAdaptiveColors(); },
            closeApp(appId) { const win = this.openWindows.get(appId)?.element; if (!win) return; win.classList.add('hidden-item'); this.openWindows.delete(appId); this.updateDockIndicators(); if (this.activeWindowId === appId) this.activeWindowId = null; setTimeout(() => win.remove(), 500); },
            setActiveWindow(winEl) { if (!winEl || this.activeWindowId === winEl.id) return; document.querySelectorAll('.app-window').forEach(w => w.classList.remove('active-window')); winEl.classList.add('active-window'); winEl.style.zIndex = ++this.highestZ; this.activeWindowId = winEl.id; },
            makeDraggable(el) { const handle = el.querySelector('.drag-handle'); handle.addEventListener('mousedown', e => { this.setActiveWindow(el); let isDragging = true, oX = e.clientX - el.offsetLeft, oY = e.clientY - el.offsetTop; const onMove = mE => { if (isDragging) { el.style.left = `${mE.clientX - oX}px`; el.style.top = `${mE.clientY - oY}px`; } }; const onUp = () => { isDragging = false; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); }); },
            makeResizable(el) { const handle = el.querySelector('.resize-handle'); handle.addEventListener('mousedown', e => { e.stopPropagation(); this.setActiveWindow(el); const classesToRemove = [...el.classList].filter(c => c.startsWith('w-') || c.startsWith('h-') || c.startsWith('max-')); el.classList.remove(...classesToRemove); let isResizing = true; let iW = el.offsetWidth; el.style.width = `${iW}px`; let iH = el.offsetHeight; el.style.height = `${iH}px`; let iMX = e.clientX, iMY = e.clientY; const onMove = mE => { if (isResizing) { el.style.width = `${iW + (mE.clientX - iMX)}px`; el.style.height = `${iH + (mE.clientY - iMY)}px`; } }; const onUp = () => { isResizing = false; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); }); },
            updateDockIndicators() { document.querySelectorAll('.dock-icon').forEach(icon => { const indicator = icon.querySelector('.active-indicator'); if (this.openWindows.has(icon.dataset.app)) indicator.classList.add('visible'); else indicator.classList.remove('visible'); }); },
            updateTime() { const opts = { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }; document.getElementById('current-time').textContent = new Intl.DateTimeFormat('en-US', opts).format(new Date()).replace(/,/g, ''); },
            initAdaptiveColors() { const img = document.getElementById('bg-image-source'); const apply = () => { try { const [r, g, b] = new ColorThief().getColor(img); document.documentElement.style.setProperty('--glass-bg-start', `rgba(${r},${g},${b},0.5)`); document.documentElement.style.setProperty('--glass-bg-end', `rgba(${Math.max(r - 20, 0)},${Math.max(g - 20, 0)},${Math.max(b - 20, 0)},0.3)`); document.documentElement.style.setProperty('--glass-border', `rgba(${Math.min(r + 40, 255)},${Math.min(g + 40, 255)},${Math.min(b + 40, 255)},0.25)`); document.querySelector('.simple-glass').style.backgroundColor = `rgba(${r},${g},${b},0.4)`; document.querySelector('.simple-glass').style.borderColor = `rgba(${Math.min(r + 40, 255)},${Math.min(g + 40, 255)},${Math.min(b + 40, 255)},0.25)`; } catch (e) { console.error("Color Thief Error:", e, "Using fallback. Ensure image is local & has crossorigin='anonymous'."); } }; if (img.complete) apply(); else img.addEventListener('load', apply); }
        };
        QuantumOS.init();
    </script>
</body>

</html>

Related Examples

Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
Aurora Spinner
Aurora Spinner using tailwindcss

Deepak Kumar Chouhan

1 year ago

1.7k
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Hamza Atig

8 months ago

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

Abdul Baset Bappy

1 year ago

1.4k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

7 months ago

935
Tags list
click to remove the tag from list

Asher Wilde

3 years ago

12.1k
Info cards

Lukas Müller

3 years ago

12.1k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Ahita Bisma Adlula

1 year ago

1.2k
Forgot password form

ariaw

10 months ago

785
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k