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.
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 reattivo progettato in uno stile brutalista, con supporto per temi scuri e utilizzando Tailwind CSS.
Componente Visualizzatore file
Un componente visualizzatore di file semplice e reattivo con un design ispirato alla carta/stampa adatto a siti Web aziendali/aziendali. Dispone di colori analoghi, HTML semantico e supporto per la modalità scura.
Componente Visualizzatore file
Un visualizzatore di file in stile neumorfico per l'e-commerce che visualizza un'immagine e i dettagli del file. Fornisce un'esperienza di interfaccia utente soft con supporto per il tema scuro.