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.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
</div>
</div>
<div class="flex justify-center">
<img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
<p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
<p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
<button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
</div>
</div>Componenti correlati
Componente Visualizzatore file
Un componente per la visualizzazione di file reattivo con microinterazioni, colori vivaci e supporto per la modalità scura, adatto per il consumo di blog o contenuti. Visualizza i dettagli del file, un'anteprima e le azioni correlate.
Componente Visualizzatore file - Musica/Audio
Un componente di visualizzazione di file complesso e reattivo progettato per piattaforme musicali e audio, caratterizzato da un'estetica Material Design con colori vivaci e supporto per la modalità scura.