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 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.

Abrir

Componente Visor de archivos

Un componente de visor de archivos esqueuomórfico con un esquema de color pastel, diseñado para el comercio electrónico, con diseño receptivo y soporte para modo oscuro. Imita una carpeta física con pestañas y un área de contenido.

Abrir

Componente Visor de archivos de neumorfismo

Un componente de visor de archivos de estilo neumorfismo para redes sociales con un esquema de color complementario y complejidad moderada. Es responsivo y admite el tema oscuro usando Tailwind CSS.

Abrir