Componente Visor de archivos brutalista
Un componente de visor de archivos en bruto y audaz con principios de diseño brutalistas. Presenta alto contraste, diseño poco convencional y elementos intencionalmente crudos. El componente incluye vista previa de archivos, visualización de metadatos y botones de acción en un esquema de color en escala de grises. Totalmente responsivo con soporte de modo oscuro usando Tailwind CSS dark: clases de utilidad. Adecuado para sitios web comerciales / corporativos que buscan un enfoque visual distintivo.
Código HTML
<!-- Brutalist File Viewer Component -->
<div class="w-full bg-white dark:bg-gray-900 border-4 border-black dark:border-gray-700 p-4 md:p-6 font-mono">
<!-- Component Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b-8 border-black dark:border-gray-700 pb-4">
<h2 class="text-3xl md:text-4xl font-black uppercase tracking-tighter text-black dark:text-white">FILE VIEWER</h2>
<div class="mt-3 md:mt-0 bg-black dark:bg-gray-800 text-white dark:text-gray-200 px-4 py-2 text-sm tracking-widest">
FILES: <span class="font-bold">14</span> | STORAGE: <span class="font-bold">64%</span>
</div>
</div>
<!-- File Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Featured File - Takes up more space -->
<div class="col-span-1 md:col-span-2 border-4 border-black dark:border-gray-700 flex flex-col">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">QUARTERLY_REPORT.PDF</span>
<span class="text-xs bg-white text-black dark:bg-gray-600 dark:text-white px-2 py-1">PINNED</span>
</div>
<div class="h-64 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/800/500" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-40 dark:opacity-60"></div>
<div class="absolute bottom-0 left-0 w-full p-3 text-white">
<div class="mb-1 text-xl font-bold uppercase">Q4 Financial Report</div>
<div class="text-sm opacity-80">Last modified: Yesterday at 14:23</div>
</div>
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="flex items-center space-x-1">
<span class="inline-block w-3 h-3 bg-black dark:bg-white rounded-full"></span>
<span class="text-xs text-black dark:text-gray-200">12.4 MB</span>
</div>
<div class="flex space-x-2">
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 text-xs uppercase tracking-wider font-bold">Open</button>
<button class="bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-bold">Download</button>
</div>
</div>
</div>
<!-- Standard File Cards -->
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">PRESENTATION.PPTX</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/600/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">5.7 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">BUDGET_2023.XLSX</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/601/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">3.2 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">LOGO_FINALS.ZIP</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/602/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">8.9 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
</div>
<!-- Shared Users Section -->
<div class="mt-8 border-t-4 border-black dark:border-gray-700 pt-4">
<h3 class="text-xl font-black uppercase tracking-tight text-black dark:text-white mb-4">SHARED WITH</h3>
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">K. JOHNSON</div>
<div class="text-xs text-gray-600 dark:text-gray-400">EDITOR</div>
</div>
</div>
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">T. WILLIAMS</div>
<div class="text-xs text-gray-600 dark:text-gray-400">VIEWER</div>
</div>
</div>
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">S. DAVIS</div>
<div class="text-xs text-gray-600 dark:text-gray-400">ADMIN</div>
</div>
</div>
<button class="bg-black dark:bg-gray-700 text-white text-sm px-4 py-3 uppercase tracking-wider font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
+ ADD USER
</button>
</div>
</div>
<!-- Bottom Controls -->
<div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center border-t-8 border-black dark:border-gray-700 pt-4">
<div class="flex flex-col mb-4 md:mb-0">
<span class="text-xs uppercase tracking-wider text-gray-600 dark:text-gray-400 font-bold">Storage Usage</span>
<div class="w-48 h-8 border-4 border-black dark:border-gray-700 mt-1 overflow-hidden">
<div class="bg-black dark:bg-gray-600 h-full w-2/3"></div>
</div>
</div>
<div class="flex gap-3">
<button class="bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-gray-700 px-6 py-3 text-sm uppercase tracking-widest font-bold">
UPLOAD NEW
</button>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white px-6 py-3 text-sm uppercase tracking-widest font-bold">
MANAGE ALL
</button>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos inspirado en Material Design que muestra una lista de archivos con imágenes de vista previa, nombres de archivo, tamaños de archivo y un avatar de usuario. Es compatible con el diseño responsivo y el tema oscuro.
Componente Visor de archivos
Componente de visor de archivos responsivo con soporte para modo oscuro
Componente Visor de archivos
Un componente de visor de archivos interactivo con estilo de Material Design y compatibilidad con el modo oscuro mediante Tailwind CSS. El componente muestra una lista de archivos con iconos, nombres, tamaños y fechas de modificación.