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.
HTML Code
<div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<svg class="h-12 w-12 text-teal-500 dark:text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
</div>
<div class="flex-grow">
<div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
<p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
</div>
</div>
<div class="flex justify-between items-center">
<button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
<button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
</div>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<style>
.shadow-lg {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-lg {
box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
}
</style>Composants associés
Skeuomorphic_Monochromatic_File_Viewer
Composant complexe de visionneuse de fichiers skeuomorphe pour une place de marché, conçu avec une palette de couleurs monochromatiques. Il comprend une liste de fichiers, un volet de prévisualisation, des boutons d’action et une section d’informations détaillées, tout en étant entièrement réactif et en prenant en charge le mode sombre.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers skeuomorphe avec une palette de couleurs pastel, conçu pour le commerce électronique, avec une mise en page réactive et une prise en charge du mode sombre. Il imite un dossier physique avec des onglets et une zone de contenu.
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.