Composants Visionneuse de fichiers Composant Visionneuse de fichiers

Composant Visionneuse de fichiers

Visionneuse de fichiers de style neumorphique pour le commerce électronique qui affiche une image et les détails d’un fichier. Fournit une expérience d’interface utilisateur douce avec prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
            <img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
        </div>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
        <p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
        </div>
    </div>
</div>

Composants associés

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers avec conception 3D, effets réactifs et prise en charge du mode sombre.

Ouvrir

Composant Neumorphism File Viewer

Un composant de visualisation de fichiers de style Neumorphism pour les médias sociaux avec une palette de couleurs complémentaire et une complexité modérée. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.

Ouvrir

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers rétro/vintage conçu pour les applications de commerce électronique. Il dispose d’une palette de couleurs monochromatiques, d’un design réactif et de la prise en charge du mode sombre.

Ouvrir