Componente Visualizzatore file
Un componente visualizzatore di file reattivo progettato secondo i principi di Material Design, con supporto per la modalità oscura ed effetti reattivi.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
<div class="space-y-4">
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
<p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
<p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
<img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
<p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
<p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode CSS -->
<style>
/* Example dark mode CSS */
body {
background-color: #121212;
color: #ffffff;
}
</style>Componenti correlati
Componente Visualizzatore file retrò
Un componente di visualizzazione di file complesso e reattivo con un'estetica retrò/vintage anni '80/'90, combinazione di colori neutri caldi, progettato per interfacce finanziarie/bancarie. Include il supporto per la modalità oscura ed elementi interattivi.
Componente Visualizzatore file
Un componente visualizzatore di file reattivo con uno stile acquerello/artistico e una combinazione di colori blu aziendale, adatto per siti Web di viaggi/turismo. Include il supporto per la modalità oscura.