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
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style brutaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif avec des micro-interactions, des couleurs vives et une prise en charge du mode sombre, adapté à la consommation de blogs ou de contenu. Il affiche les détails du fichier, un aperçu et les actions associées.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif avec le style Material Design et la prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant affiche une liste de fichiers avec des icônes, des noms, des tailles et des dates de modification.