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 de badges simple et réactif avec prise en charge du mode sombre, utilisant une palette de couleurs triadique adaptée à un portfolio.
Composant Badges
Un composant de badges réactifs avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS. Ce composant inclut des effets de survol et utilise des images d’espace réservé pour les avatars.
Composant Badges
Composant de badges élégant et réactif pour la documentation ou les sites wiki, avec une palette de couleurs terre, une typographie de luxe et une prise en charge complète du mode sombre.