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

Componente visualizzatore file reattivo con supporto per la modalità oscura

Aperto

Componente Visualizzatore file

Un componente visualizzatore di file complesso e reattivo con un'interfaccia utente in modalità scura e toni della terra, progettato per applicazioni sportive/fitness. Elenco dei file delle funzionalità, anteprima e sezioni dei dettagli.

Aperto

Componente Visualizzatore file

Un componente visualizzatore di file reattivo progettato in uno stile brutalista, con supporto per temi scuri e utilizzando Tailwind CSS.

Aperto