Componente Visor de archivos
Un componente de visor de archivos con estilo Neumorphism diseñado con Tailwind CSS. Cuenta con un diseño responsivo y soporte para temas oscuros.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
</div>
</div>
<div class="flex flex-col">
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
<p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
<p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro.
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design, con soporte para modo oscuro y efectos responsivos.
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.