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 - Tableau de bord analogue 3D
Un composant de badges réactif avec une conception 3D, une palette de couleurs analogue, une complexité modérée et la prise en charge du thème sombre pour les tableaux de bord. Utilise uniquement les classes CSS Tailwind.
Composant Badges
Un composant Badges réactif avec des micro-interactions attrayantes, conçu à l’aide de Tailwind CSS. Prend en charge le mode sombre et inclut des espaces réservés aux images.
Insignes Composante 48
Un composant de badges conçu selon les principes de Material Design, avec des mises en page réactives et une prise en charge du thème sombre à l’aide de Tailwind CSS.