explorer file-manager three-pane workspace desktop files details-pane minimal
File Explorer
Three-pane file-manager workspace with a folder tree, file list, and a details pane, inspired by desktop explorers.
minimal Responsive
Live Preview
Sections
toolbarbreadcrumbfolder-treefile-listdetails-pane
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Files — Explorer workspace</title>
<meta name="description" content="A three-pane file-manager workspace layout — folder tree, file list, and a details pane — inspired by desktop file explorers." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="h-screen bg-slate-50 text-slate-800">
<div class="flex h-full flex-col">
<!-- Toolbar -->
<header class="flex items-center gap-2 border-b border-slate-200 bg-white px-3 py-2">
<div class="flex items-center gap-1">
<button type="button" aria-label="Back" class="flex h-8 w-8 items-center justify-center rounded text-slate-500 hover:bg-slate-100"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg></button>
<button type="button" aria-label="Forward" class="flex h-8 w-8 items-center justify-center rounded text-slate-500 hover:bg-slate-100"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button>
</div>
<nav aria-label="Breadcrumb" class="flex items-center gap-1 rounded-md border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-500">
<a href="#" class="hover:text-slate-800">Home</a><span aria-hidden="true">/</span>
<a href="#" class="hover:text-slate-800">Projects</a><span aria-hidden="true">/</span>
<span class="font-medium text-slate-800">Aurora</span>
</nav>
<form role="search" action="#" class="ml-auto">
<label for="q" class="sr-only">Search files</label>
<input id="q" name="q" type="search" placeholder="Search files…" class="w-48 rounded-md border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm focus:border-slate-400 focus:outline-none" />
</form>
<button type="button" class="flex items-center gap-1.5 rounded-md bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-slate-700"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>New</button>
</header>
<!-- Three panes -->
<div class="flex min-h-0 flex-1">
<!-- Folder tree -->
<aside class="hidden w-56 shrink-0 overflow-y-auto border-r border-slate-200 bg-white p-2 sm:block" aria-label="Folders">
<ul class="space-y-0.5 text-sm">
<li><a href="#" class="flex items-center gap-2 rounded px-2 py-1.5 text-slate-600 hover:bg-slate-100"><svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/></svg>Documents</a></li>
<li><a href="#" class="flex items-center gap-2 rounded px-2 py-1.5 text-slate-600 hover:bg-slate-100"><svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/></svg>Downloads</a></li>
<li>
<a href="#" aria-current="page" class="flex items-center gap-2 rounded bg-blue-50 px-2 py-1.5 font-medium text-blue-700"><svg class="h-4 w-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/></svg>Projects</a>
<ul class="ml-4 mt-0.5 space-y-0.5 border-l border-slate-200 pl-2">
<li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Aurora</a></li>
<li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Borealis</a></li>
</ul>
</li>
<li><a href="#" class="flex items-center gap-2 rounded px-2 py-1.5 text-slate-600 hover:bg-slate-100"><svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/></svg>Pictures</a></li>
</ul>
</aside>
<!-- File list -->
<main class="min-w-0 flex-1 overflow-y-auto bg-slate-50">
<table class="w-full text-sm">
<thead class="sticky top-0 bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-400">
<tr class="border-b border-slate-200">
<th scope="col" class="px-4 py-2.5 font-semibold">Name</th>
<th scope="col" class="hidden px-4 py-2.5 font-semibold md:table-cell">Modified</th>
<th scope="col" class="hidden px-4 py-2.5 font-semibold sm:table-cell">Size</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="cursor-pointer hover:bg-white"><td class="flex items-center gap-2 px-4 py-2.5"><svg class="h-4 w-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/></svg>assets</td><td class="hidden px-4 py-2.5 text-slate-400 md:table-cell">Jun 10</td><td class="hidden px-4 py-2.5 text-slate-400 sm:table-cell">—</td></tr>
<tr class="cursor-pointer bg-blue-50/60 hover:bg-blue-50"><td class="flex items-center gap-2 px-4 py-2.5 font-medium text-slate-900"><svg class="h-4 w-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z"/></svg>proposal.pdf</td><td class="hidden px-4 py-2.5 text-slate-400 md:table-cell">Jun 12</td><td class="hidden px-4 py-2.5 text-slate-400 sm:table-cell">2.4 MB</td></tr>
<tr class="cursor-pointer hover:bg-white"><td class="flex items-center gap-2 px-4 py-2.5"><svg class="h-4 w-4 text-emerald-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z"/></svg>budget.xlsx</td><td class="hidden px-4 py-2.5 text-slate-400 md:table-cell">Jun 11</td><td class="hidden px-4 py-2.5 text-slate-400 sm:table-cell">88 KB</td></tr>
<tr class="cursor-pointer hover:bg-white"><td class="flex items-center gap-2 px-4 py-2.5"><svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z"/></svg>notes.md</td><td class="hidden px-4 py-2.5 text-slate-400 md:table-cell">Jun 09</td><td class="hidden px-4 py-2.5 text-slate-400 sm:table-cell">12 KB</td></tr>
<tr class="cursor-pointer hover:bg-white"><td class="flex items-center gap-2 px-4 py-2.5"><svg class="h-4 w-4 text-violet-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm4 3l4 3-4 3V8z"/></svg>walkthrough.mp4</td><td class="hidden px-4 py-2.5 text-slate-400 md:table-cell">Jun 06</td><td class="hidden px-4 py-2.5 text-slate-400 sm:table-cell">214 MB</td></tr>
</tbody>
</table>
</main>
<!-- Details pane -->
<aside class="hidden w-72 shrink-0 overflow-y-auto border-l border-slate-200 bg-white p-5 lg:block" aria-label="Details">
<div class="flex h-32 items-center justify-center rounded-lg bg-gradient-to-br from-blue-50 to-slate-100">
<svg class="h-12 w-12 text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z"/></svg>
</div>
<h2 class="mt-4 font-semibold text-slate-900">proposal.pdf</h2>
<p class="text-sm text-slate-400">PDF document · 2.4 MB</p>
<dl class="mt-4 space-y-2 border-t border-slate-100 pt-4 text-sm">
<div class="flex justify-between"><dt class="text-slate-500">Modified</dt><dd class="text-slate-700">Jun 12, 2026</dd></div>
<div class="flex justify-between"><dt class="text-slate-500">Created</dt><dd class="text-slate-700">May 28, 2026</dd></div>
<div class="flex justify-between"><dt class="text-slate-500">Owner</dt><dd class="text-slate-700">Sam Rivera</dd></div>
<div class="flex justify-between"><dt class="text-slate-500">Shared with</dt><dd class="text-slate-700">3 people</dd></div>
</dl>
<div class="mt-5 flex gap-2">
<button type="button" class="flex-1 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-700">Open</button>
<button type="button" class="flex-1 rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Share</button>
</div>
</aside>
</div>
</div>
</body>
</html>
A three-pane file-explorer workspace — folder tree, file list, and details pane — bringing desktop-software density to the web. A software-inspired layout that AI generators, trained mostly on marketing pages, seldom produce.