Componenti Visualizzatore di file Componente Visualizzatore file

Componente Visualizzatore file

Un componente per la visualizzazione di file retrò/vintage progettato per applicazioni di e-commerce. È dotato di una combinazione di colori monocromatica, un design reattivo e il supporto per la modalità oscura.

Anteprima

Codice HTML

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

Componenti correlati

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.

Aperto

Componente Visualizzatore file

Un visualizzatore di file in stile neumorfico per l'e-commerce che visualizza un'immagine e i dettagli del file. Fornisce un'esperienza di interfaccia utente soft con supporto per il tema scuro.

Aperto

Componente Visualizzatore file

Un componente visualizzatore di file reattivo progettato in uno stile brutalista, con supporto per temi scuri e utilizzando Tailwind CSS.

Aperto