Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado en un estilo brutalista, con soporte para temas oscuros y uso de Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-gray-400 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-3xl">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">File Viewer</h1>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-12 w-12 border-2 border-gray-600">
<span class="ml-3 text-xl font-medium text-gray-800 dark:text-white">Uploaded by John Doe</span>
</div>
<div class="flex mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">File: Project Report.pdf</h2>
<div class="ml-auto text-lg font-semibold text-gray-600 dark:text-gray-300">10 MB</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This document contains a detailed report on project progress and future milestones. Please review it carefully.
</p>
<img src="https://picsum.photos/600/400" alt="Placeholder Image" class="rounded-md mb-4">
<div class="flex justify-between">
<button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">Download</button>
<button class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-400 transition duration-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Delete</button>
</div>
</div>
</div>Componentes relacionados
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.
Componente Visor de archivos
Un componente de visor de archivos simple y receptivo con un diseño inspirado en papel / impresión adecuado para sitios web comerciales / corporativos. Cuenta con colores análogos, HTML semántico y compatibilidad con el modo oscuro.