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.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
</div>
</div>
<div class="flex flex-col">
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
<p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
<p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente Visualizzatore file
Un componente per la visualizzazione di file scheumorfiche con una combinazione di colori pastello, progettato per l'e-commerce, con layout reattivo e supporto per la modalità scura. Imita una cartella fisica con schede e un'area di contenuto.
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.