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 visualisation de fichiers réactif pour le commerce électronique avec une conception 3D, une palette de couleurs complémentaire et une mise en page simple, prenant en charge le mode sombre à l’aide de Tailwind CSS. Il affiche des fiches ou des documents sur les produits.
Composant Brutalist File Viewer
Un composant de visionneuse de fichiers brut et audacieux avec des principes de conception brutalistes. Présente un contraste élevé, une disposition non conventionnelle et des éléments intentionnellement grossiers. Le composant comprend l’aperçu des fichiers, l’affichage des métadonnées et les boutons d’action dans un schéma de couleurs en niveaux de gris austère. Entièrement réactif avec prise en charge du mode sombre à l’aide des classes utilitaires Tailwind CSS dark :. Convient aux sites Web d’entreprise/d’entreprise à la recherche d’une approche visuelle distinctive.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style Neumorphism conçu avec Tailwind CSS. Il présente un design réactif et une prise en charge du thème sombre.