Glassmorphism_Grayscale_Badges_Component
Un composant simple et réactif de type badges de type glassmorphism avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative p-6 rounded-2xl shadow-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-50 max-w-lg w-full overflow-hidden">
<!-- Background blur elements - positioned absolutely for glassmorphism effect -->
<div class="absolute inset-0 z-0" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));"></div>
<div class="absolute -top-10 -left-10 w-40 h-40 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-2000"></div>
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gray-200 dark:bg-gray-800 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-4000"></div>
<div class="relative z-10">
<h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-gray-800 dark:text-gray-100 text-center">
Our Achievements
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Badge 1 -->
<div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
<span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
<svg class="w-6 h-6" 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="M5 13l4 4L19 7"></path></svg>
</span>
<div>
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Certified Excellence</p>
<p class="text-sm text-gray-600 dark:text-gray-300">ISO 9001:2015</p>
</div>
</div>
<!-- Badge 2 -->
<div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
<span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
<svg class="w-6 h-6" 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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2h-1c-1.657 0-3 .895-3 2s1.343 2 3 2h1a5 5 0 005-5v-1a5 5 0 00-5-5H7a5 5 0 00-5 5v1a5 5 0 005 5h1c1.657 0 3-.895 3-2s-1.343-2-3-2H8c-1.657 0-3-.895-3-2s1.343-2 3-2h1"></path></svg>
</span>
<div>
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Industry Leader</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Top 10 Innovator</p>
</div>
</div>
<!-- Badge 3 -->
<div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
<span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
<svg class="w-6 h-6" 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="M3 6l3 1m0 0l-3 1.5M6 7l3-1m0 0l-3 1.5m0 0l-3 1.5M6 9l3-1m0 0a9.002 9.002 0 00-3-7.5M12 6a9.002 9.002 0 013 7.5"></path></svg>
</span>
<div>
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Client Satisfaction</p>
<p class="text-sm text-gray-600 dark:text-gray-300">98% Positive Feedback</p>
</div>
</div>
<!-- Badge 4 -->
<div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
<span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
<svg class="w-6 h-6" 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="M7 11V7m0 0L5 9m2-2l2 2m7-2v4m0 0l2 2m-2-2l-2 2M12 18h.01M12 6h.01M12 12h.01M12 18h.01M12 6h.01M12 12h.01"></path></svg>
</span>
<div>
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Award Winning</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Tech Growth Award 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* This is for the custom blob animation */
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
</style>Composants associés
Composant Badges
Un composant simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
Composant Badges
Un composant de badges neumorphes avec une palette de couleurs analogue pour un site Web de blog/contenu. Il dispose d’un design réactif et d’un support de thème sombre, en utilisant uniquement HTML et Tailwind CSS.
Composant Badges
Un composant de badge en mode sombre réactif pour le commerce électronique, présentant divers badges avec des schémas de couleurs complémentaires et des éléments interactifs.