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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats Other Badge

Author Gidy Official

219

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

Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

7 months ago

635
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

606
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

1 year ago

3.3k
Payment form

Author:
ORGIN_DREAMS

8 months ago

558
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

4 months ago

245
chatbot
is my chatbot

Author:
Omer fils ELENGA

2 months ago

294
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.5k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

8 months ago

891
Play, Pause and Stop buttons

Author:
Lukas Müller

3 years ago

11.3k
Login Form (Balsamiq Look)

Author:
Ahmad Syaifuddin

2 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.2k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

3 months ago

523

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components