Componentes Visor de archivos Componente Visor de archivos

Componente Visor de archivos

Un componente de visor de archivos responsivo diseñado para sitios web de comercio electrónico en modo oscuro con un esquema de color monocromático. Incluye funciones interactivas como la carga de archivos y la vista previa.

Vista previa

Código HTML

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
    <div class="mb-4">
        <label class="block mb-2">Upload File:</label>
        <input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
    </div>
    <div class="mt-4">
        <h3 class="text-xl mb-2">File Preview:</h3>
        <div class="bg-gray-700 p-4 rounded">
            <img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
            <div>
                <span class="font-bold">Uploaded by:</span> John Doe
            </div>
        </div>
    </div>
    <div class="mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Confirm Upload
        </button>
    </div>
</div>

Componentes relacionados

Skeuomorphic_Monochromatic_File_Viewer

Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.

Abrir