Componenti Visualizzatore di file Componente Visualizzatore file

Componente Visualizzatore file

Un componente visualizzatore di file ispirato a Material Design che visualizza un elenco di file con immagini di anteprima, nomi di file, dimensioni dei file e un avatar utente. Supporta il design reattivo e il tema scuro.

Anteprima

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

Componenti correlati

Componente Visualizzatore file

Un componente visualizzatore di file con design 3D, effetti reattivi e supporto per la modalità oscura.

Aperto

Componente Visualizzatore file

Componente visualizzatore file reattivo con supporto per la modalità oscura

Aperto

Componente Visualizzatore file

Un componente visualizzatore di file reattivo progettato per siti Web di e-commerce in modalità oscura con una combinazione di colori monocromatica. Include funzionalità interattive come il caricamento e l'anteprima dei file.

Aperto