Home
Hamza Atig
macOS Style Webpage – macOS Design in the Browser

macOS Style Webpage – macOS Design in the Browser

A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

This tailwind example is contributed by Hamza Atig, on 23-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Navbar Mockup

Author Hamza Atig

1.1k

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

Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Navigation bar
Navbar

Author:
Aman kumar

1 year ago

4.4k
portifolio
skills

Author:
ishimwe prince

8 months ago

930
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

61.7k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

9 months ago

717
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

27.8k
Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

8 months ago

791
Navigation Bar Responsive

Author:
SAI BENDE

2 years ago

10.1k
websitee

Author:
Anonymous

7 months ago

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

Author:
Hamza Atig

1 month ago

85
Navbar

Author:
Morris Muriuki Muthigani

6 months ago

751
pasta
by salvator

Author:
Baraka Salvator

8 months ago

899

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components