Badges Component
A set of Material Design inspired badges for Technology/SaaS applications, featuring a black and white color scheme with an accent color, responsive layout, and dark mode support.
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>Related Components
Badges Component
Elegant and responsive badges component for documentation or wiki sites, featuring an earth-toned color scheme, luxury typography, and full dark mode support.
Badges Component
A simple Glassmorphism-styled badges component for social media, featuring frosted glass effects with blur, analogous colors, and dark mode support using Tailwind CSS. It's responsive and uses picsum.photos for images and randomuser.me for avatars where necessary. No JavaScript is included.
Badges Component
A Neumorphism styled badges component for blogs with analogous color scheme and rich interface.