Componente Visualizzatore file
Un componente visualizzatore di file con design 3D, effetti reattivi e supporto per la modalità oscura.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
<div class="dark:text-white">
<h2 class="text-xl font-bold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Visualizzatore file
Un componente nostalgico per la visualizzazione di file ispirato all'estetica retrò degli anni '80/'90, progettato con Tailwind CSS e che supporta effetti reattivi e temi scuri.
Componente Visualizzatore file retrò
Componente visualizzatore di file retrò/vintage con layout reattivo e supporto per temi scuri. Include un elenco di file con icone e nomi e un'area di anteprima. Utilizza caratteri e colori in stile retrò.
Visualizzatore file Componente 1
Un componente minimalista per la visualizzazione di file progettato utilizzando Tailwind CSS, con effetti reattivi e supporto per temi scuri. Visualizza i file con un layout pulito, inclusi i segnaposto per le immagini e gli avatar degli utenti.