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
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.
Componente Visualizzatore file
Un componente visualizzatore di file in stile neumorfismo progettato con Tailwind CSS. È dotato di un design reattivo e del supporto per i temi scuri.