CCHub Logo CCHub Tailwind Collection
Componenti Visualizzatore di file Componente Visualizzatore file

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.

Anteprima

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

Skeuomorphic_Monochromatic_File_Viewer

Un complesso componente di visualizzazione di file scheumorfi per un marketplace, progettato con una combinazione di colori monocromatica. Include un elenco di file, un riquadro di anteprima, pulsanti di azione e una sezione di informazioni dettagliate, il tutto pur essendo completamente reattivo e supportando la modalità oscura.

Aperto

Componente Visualizzatore file

Un componente reattivo del visualizzatore di file con lo stile Material Design e il supporto della modalità oscura utilizzando Tailwind CSS. Il componente visualizza un elenco di file con icone, nomi, dimensioni e date di modifica.

Aperto

Componente Visualizzatore file

Un componente di visualizzazione file complesso e reattivo con uno stile aziendale/professionale, combinazione di colori analoga e supporto per la modalità scura, adatto per ambienti aziendali.

Aperto