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.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
<div class="space-y-4">
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
<p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
<p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
<p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode CSS -->
<style>
/* Example dark mode CSS */
body {
background-color: #121212;
color: #ffffff;
}
</style>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos de estilo brutalista con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros.
Skeuomorphic_Monochromatic_File_Viewer
Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.