Componentes Visor de archivos Componente Visor de archivos

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.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente Visor de archivos retro

Componente de visor de archivos retro / vintage con diseño receptivo y soporte de tema oscuro. Incluye una lista de archivos con iconos y nombres, y un área de vista previa. Utiliza fuentes y colores de estilo retro.

Abrir

Componente 1 del visor de archivos

Un componente de visor de archivos minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros. Muestre archivos con un diseño limpio, incluidos marcadores de posición para imágenes y avatares de usuario.

Abrir

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.

Abrir