Home
gidy
machine

machine

tell you how your MAC pc work

This tailwind example is contributed by gidy, on 18-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics,caution

Stats Other Alert

Author gidy

237

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

Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1k
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.

Author:
Gidy Official

2 months ago

222
Landi page template
con un cuerpo libre

Author:
Raul antonio de la cruz hernandez

1 month ago

52
How does it work?

Author:
Abdul Baset Bappy

7 months ago

700
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.9k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.3k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

7 months ago

1k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

10 months ago

1.6k
htmlcss0

Author:
Anonymous

7 months ago

623
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

8 months ago

440
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

9 months ago

1.2k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

8 months ago

896

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components