Skeuomorphic_Monochromatic_File_Viewer
A complex skeuomorphic file viewer component for a marketplace, designed with a monochromatic color scheme. It includes a file list, a preview pane, action buttons, and a detailed information section, all while being fully responsive and supporting dark mode.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen font-sans antialiased flex items-center justify-center">
<div class="flex flex-col lg:flex-row w-full max-w-7xl mx-auto border-4 border-blue-300 dark:border-gray-700 rounded-3xl shadow-xl overflow-hidden
bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-800 dark:to-gray-900 p-2 sm:p-4 lg:p-6
transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
<!-- Left Pane: File List / Navigation -->
<div class="lg:w-1/3 xl:w-1/4 bg-blue-100 dark:bg-gray-850 p-4 rounded-xl mb-4 lg:mb-0 lg:mr-4
shadow-inner-sm border border-blue-200 dark:border-gray-700
flex flex-col">
<div class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-4 pb-2 border-b border-blue-300 dark:border-gray-700
shadow-text-light dark:shadow-text-dark text-center tracking-wide">File Browser</div>
<div class="mb-4 relative">
<input type="text" placeholder="Search files..." class="w-full p-3 rounded-full bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-200
placeholder-blue-400 dark:placeholder-gray-500 border border-blue-200 dark:border-gray-700
shadow-inset-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 pl-10">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-500 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zM21.707 20.293L17 15.586A8 8 0 0018 10c0-1.89-.5-3.66-1.37-5.18L17.707 4.293a1 1 0 01-1.414 1.414L15 6.414A9.957 9.957 0 0110 0c-5.523 0-10 4.477-10 10s4.477 10 10 10c1.88 0 3.65-.52 5.17-1.38l-.707.707a.999.999 0 010 1.414.999.999 0 01-1.414 0l-5.707-5.707A9.957 9.957 0 010 10C0 4.477 4.477 0 10 0s10 4.477 10 10c0 1.9-.53 3.67-1.42 5.19l5.707 5.707a.999.999 0 010 1.414.999 0 01-1.414 0z" />
</svg>
</div>
<ul class="space-y-2 overflow-y-auto flex-grow pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">
<!-- File List Item -->
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Product_Catalogue_Q3.pdf</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">1.2 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Market_Research_Report.docx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">890 KB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 10.9V22c-5.52-.55-9.98-4.84-10-10H2.05c.02 4.41 3.51 7.9 7.95 7.9zm0-18.9V2c5.52.55 9.98 4.84 10 10h1.95c-.02-4.41-3.51-7.9-7.95-7.9zM12 4.1L2.05 4.1A9.957 9.957 0 0110 0c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10h1.95A7.95 7.95 0 0012 4.1zm0 15.8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Contract_Draft_V2.docx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">2.1 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Quarterly_Sales_2023.xlsx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">1.5 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Marketing_Plan_2024.pptx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">4.8 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">User_Manual_V1.pdf</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">900 KB</small>
</li>
</ul>
<button class="mt-4 w-full p-3 rounded-xl text-white font-semibold flex items-center justify-center
bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600
shadow-neumorphic-button dark:shadow-neumorphic-button-dark
active:shadow-inset-button active:bg-blue-800 dark:active:bg-blue-800 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
Upload File
</button>
</div>
<!-- Right Pane: File Preview & Details -->
<div class="lg:w-2/3 xl:w-3/4 flex flex-col p-4
bg-blue-100 dark:bg-gray-850 rounded-xl shadow-inner-sm border border-blue-200 dark:border-gray-700">
<div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-300 dark:border-gray-700">
<h2 class="text-xl font-bold text-blue-800 dark:text-blue-200 shadow-text-light dark:shadow-text-dark tracker-wide">File Preview</h2>
<div class="flex space-x-2">
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 9l-7 7 1.41 1.41L12 11.83l5.59 5.58L19 16l-7-7z" />
</svg>
</button>
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
</svg>
</button>
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</svg>
</button>
</div>
</div>
<!-- Preview Area -->
<div class="flex-grow flex items-center justify-center bg-blue-50 dark:bg-gray-900 rounded-xl mb-6
border border-blue-200 dark:border-gray-700 shadow-inset-md overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="File Preview" class="max-w-full max-h-full object-contain rounded-lg shadow-lg opacity-80">
</div>
<!-- File Details -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Name</h3>
<p class="text-blue-900 dark:text-blue-100 text-base overflow-hidden truncate">Product_Catalogue_Q3.pdf</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Type</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">PDF Document</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Size</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">1.2 MB</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded On</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">2023-10-26</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Last Modified</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">2023-11-15</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm flex items-center">
<img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader">
<div>
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded By</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">John Doe</p>
</div>
</div>
</div>
<!-- File Tags / Categories -->
<div class="mb-6">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-2">Tags</h3>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Marketing</span>
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Catalogue</span>
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Q3</span>
</div>
</div>
<!-- Share and Version History -->
<div class="flex flex-col sm:flex-row justify-between items-center pt-4 border-t border-blue-300 dark:border-gray-700">
<button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-white font-semibold flex items-center justify-center
bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-500 mr-0 sm:mr-4 mb-2 sm:mb-0
shadow-neumorphic-button dark:shadow-neumorphic-button-dark
active:shadow-inset-button active:bg-blue-700 dark:active:bg-blue-700 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.41.09-.6s-.04-.4-.09-.6l7.05-4.11c.52.48 1.2.78 1.96.78 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .2.04.4.09.6L7.05 11.9c-.52-.48-1.2-.78-1.96-.78-2.21 0-4 1.79-4 4s1.79 4 4 4c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.2-.09.41-.09.6 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4z" />
</svg>
Share File
</button>
<button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-blue-800 dark:text-blue-200 font-semibold flex items-center justify-center
bg-blue-200 dark:bg-gray-700 hover:bg-blue-300 dark:hover:bg-gray-600
shadow-neumorphic-button-alt dark:shadow-neumorphic-button-alt-dark
active:shadow-inset-button active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
</svg>
Version History
</button>
</div>
</div>
</div>
</div>
<style>
/* Custom tailwind utilities for skeuomorphism */
.shadow-neumorphic-button {
box-shadow: 6px 6px 12px #9bcafa, -6px -6px 12px #d3faff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #2a2a2a;
}
.shadow-neumorphic-button-alt {
box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
}
.dark .shadow-neumorphic-button-alt-dark {
box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
}
.shadow-neumorphic-icon {
box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
}
.dark .shadow-neumorphic-icon-dark {
box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
}
.shadow-inset-button {
box-shadow: inset 4px 4px 8px #9bcafa, inset -4px -4px 8px #d3faff;
}
.dark .shadow-inset-button {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
}
.shadow-inset-icon {
box-shadow: inset 3px 3px 6px #9bcafa, inset -3px -3px 6px #d3faff;
}
.dark .shadow-inset-icon {
box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #2a2a2a;
}
.shadow-light {
box-shadow: 3px 3px 6px #bbd6fb, -3px -3px 6px #e0f6ff;
}
.dark .shadow-dark {
box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #2a2a2a;
}
.shadow-inset-sm {
box-shadow: inset 2px 2px 4px #bbd6fb, inset -2px -2px 4px #e0f6ff;
}
.dark .shadow-inset-sm {
box-shadow: inset 2px 2px 4px #4a4a4a, inset -2px -2px 4px #2a2a2a;
}
.shadow-inset-md {
box-shadow: inset 4px 4px 8px #bbd6fb, inset -4px -4px 8px #e0f6ff;
}
.dark .shadow-inset-md {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
}
.shadow-tag {
box-shadow: 2px 2px 4px #9bcafa, -2px -2px 4px #d3faff;
}
.dark .shadow-tag {
box-shadow: 2px 2px 4px #4a4a4a, -2px -2px 4px #2a2a2a;
}
.shadow-text-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.dark .shadow-text-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.2);
}
/* Custom scrollbar styles */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.scrollbar-thumb-blue-400::-webkit-scrollbar-thumb {
background-color: #60a5fa;
border-radius: 10px;
border: 1px solid #93c5fd;
}
.dark .scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
background-color: #4b5563;
border: 1px solid #6b7280;
}
.scrollbar-track-blue-100::-webkit-scrollbar-track {
background: #dbeafe;
}
.dark .scrollbar-track-gray-800::-webkit-scrollbar-track {
background: #1f2937;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #3b82f6;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #374151;
}
</style>Related Components
File Viewer Component
A responsive file viewer component designed for e-commerce websites in dark mode with a monochromatic color scheme. It includes interactive features like file upload and preview.
File Viewer Component
A brutalist-style file viewer component with responsive design and dark mode support using Tailwind CSS.
File Viewer Component
A responsive file viewer component styled with Material Design principles using Tailwind CSS, featuring dark theme support.