Компонент «Бейджи»

<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>