Composants Visionneuse de fichiers Composant Visionneuse de fichiers

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, avec prise en charge du thème sombre.

Aperçu

HTML Code

<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Document Title</h3>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <span class="font-medium">John Doe</span></p>
    </div>
    <div class="flex flex-col items-center mb-4">
        <img src="https://picsum.photos/200/100" alt="File Preview" class="rounded-lg shadow-md mb-4" />
        <p class="text-gray-700 dark:text-gray-300 text-center">File Description: This is a placeholder file viewer that shows brief file details and presentation.</p>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-gray-600 dark:text-gray-400">File Size: 2.3 MB</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow">Download</button>
    </div>
</div>

Composants associés

Composant Visionneuse de fichiers

Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre

Ouvrir

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers réactif conçu dans un style brutaliste, avec la prise en charge du thème sombre et utilisant Tailwind CSS.

Ouvrir

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers nostalgique inspiré de l’esthétique rétro des années 80/90, conçu avec Tailwind CSS et prenant en charge les effets réactifs et les thèmes sombres.

Ouvrir