Composant Badges
Un ensemble de badges inspirés de Material Design pour les applications technologiques/SaaS, avec une palette de couleurs noir et blanc avec une couleur d’accentuation, une mise en page réactive et la prise en charge du mode sombre.
HTML Code
<div class="p-6 sm:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">
<div class="w-full max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-8 text-center">
Product Feature Badges
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Badge 1: Real-time Analytics -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-violet-600 dark:bg-violet-500 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-violet-100 dark:bg-violet-700/50 text-violet-600 dark:text-violet-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14h-2v-6h2v6zm0-8h-2V6h2v2z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Real-time Analytics</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Gain instant insights into your data with live dashboards and comprehensive reports.
</p>
<a href="#" class="inline-flex items-center text-violet-600 dark:text-violet-400 font-medium text-sm hover:text-violet-800 dark:hover:text-violet-300 group-hover:underline transition-colors duration-200">
Learn More
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Badge 2: Secure Cloud Storage -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-gray-900 dark:bg-gray-700 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-gray-100 dark:bg-gray-700/50 text-gray-900 dark:text-gray-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-8H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Secure Cloud Storage</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Protect your valuable data with enterprise-grade encryption and robust security protocols.
</p>
<a href="#" class="inline-flex items-center text-gray-900 dark:text-gray-400 font-medium text-sm hover:text-gray-700 dark:hover:text-gray-300 group-hover:underline transition-colors duration-200">
Explore Security
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Badge 3: Seamless Integrations -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-violet-600 dark:bg-violet-500 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-violet-100 dark:bg-violet-700/50 text-violet-600 dark:text-violet-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 12h-2V8h-2v4h-2V8h-2v4H9V8H7v4H5v-2H3v2c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8h-2v4zM16 4h-2V2h2v2zm-4 0h-2V2h2v2zm-4 0H6V2h2v2z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Seamless Integrations</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Connect effortlessly with your existing tools and streamline your workflows.
</p>
<a href="#" class="inline-flex items-center text-violet-600 dark:text-violet-400 font-medium text-sm hover:text-violet-800 dark:hover:text-violet-300 group-hover:underline transition-colors duration-200">
See Integrations
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Badge 4: 24/7 Support -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-gray-900 dark:bg-gray-700 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-gray-100 dark:bg-gray-700/50 text-gray-900 dark:text-gray-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">24/7 Priority Support</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Never get stuck. Our dedicated support team is always here to help you around the clock.
</p>
<a href="#" class="inline-flex items-center text-gray-900 dark:text-gray-400 font-medium text-sm hover:text-gray-700 dark:hover:text-gray-300 group-hover:underline transition-colors duration-200">
Contact Support
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Badge 5: Customizable Dashboards -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-violet-600 dark:bg-violet-500 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-violet-100 dark:bg-violet-700/50 text-violet-600 dark:text-violet-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Customizable Dashboards</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Tailor your workspace to fit your exact needs with fully configurable dashboards.
</p>
<a href="#" class="inline-flex items-center text-violet-600 dark:text-violet-400 font-medium text-sm hover:text-violet-800 dark:hover:text-violet-300 group-hover:underline transition-colors duration-200">
Customize Now
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Badge 6: Scalable Architecture -->
<div class="relative p-6 sm:p-7 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700 group">
<div class="absolute top-0 left-0 w-full h-1 bg-gray-900 dark:bg-gray-700 rounded-t-lg"></div>
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-gray-100 dark:bg-gray-700/50 text-gray-900 dark:text-gray-400 mr-4 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2v-6zm0 8h2v2h-2v-2z"></path>
</svg>
</div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Scalable Architecture</h3>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-5">
Grow without limits. Our platform is built to scale with your business's evolving demands.
</p>
<a href="#" class="inline-flex items-center text-gray-900 dark:text-gray-400 font-medium text-sm hover:text-gray-700 dark:hover:text-gray-300 group-hover:underline transition-colors duration-200">
Discover Scaling
<svg class="ml-1 w-4 h-4" 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 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>Composants associés
Composant Badges de produits e-commerce
Il s’agit d’un composant complexe de badges de produits e-commerce avec une utilisation intensive de dégradés de couleurs d’une palette forêt/vert, des transitions fluides et un design réactif avec prise en charge du mode sombre. Convient pour présenter l’état des produits, les offres ou les catégories.
Composant Badges
Un composant de badges réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.
Composant Badges
Un composant de badges polyvalent conçu pour les sites Web d’entreprise, utilisant des tons de terre dans une interface utilisateur en mode sombre pour améliorer l’expérience utilisateur. Le composant présente une réactivité avec quelques éléments interactifs.