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.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">File Viewer</h2>
<div class="flex flex-col items-center">
<div class="mb-4">
<img src="https://picsum.photos/200/150" alt="File Thumbnail" class="w-full h-auto rounded-lg shadow-md transition-transform duration-300 hover:scale-105" />
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">File Name: Example Document.pdf</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Uploaded by:</p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto" />
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Uploaded on: June 10, 2023</p>
</div>
<div class="mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">Open File</button>
<button class="ml-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded transition duration-300">Delete File</button>
</div>
</div>
</div>Componenti correlati
Componente Visualizzatore file brutalista
Un componente per la visualizzazione di file grezzo e audace con principi di progettazione brutalisti. Presenta un contrasto elevato, un layout non convenzionale ed elementi intenzionalmente grezzi. Il componente include l'anteprima dei file, la visualizzazione dei metadati e i pulsanti di azione in una combinazione di colori in scala di grigi. Completamente reattivo con supporto per la modalità oscura utilizzando Tailwind CSS dark: classi di utilità. Adatto per siti web aziendali/aziendali che cercano un approccio visivo distintivo.
Componente Visualizzatore file
Componente visualizzatore file reattivo con supporto per la modalità oscura
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.