Rechercher des composants

Catégories

Badges

Petits indicateurs généralement utilisés pour afficher les dénombrements ou l’état

Composant Badges neumorphes

Une collection de badges interactifs conçus dans un style neumorphique doux, adaptés aux applications technologiques/SaaS. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et de la réactivité.

Ouvrir Aperçu

                <div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
  <div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">

    <!-- Active Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-blue-600 dark:text-blue-400 
                   shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                   hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
      <span class="text-sm font-semibold whitespace-nowrap">Active</span>
    </button>

    <!-- Pending Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-yellow-600 dark:text-yellow-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
      <svg class="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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
    </button>

    <!-- Success Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-green-600 dark:text-green-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
      <svg class="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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Completed</span>
    </button>

    <!-- Error Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-red-600 dark:text-red-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      <svg class="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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Failed</span>
    </button>

    <!-- Info Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-gray-700 dark:text-gray-300 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
      <svg class="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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Informational</span>
    </button>

    <!-- New Feature Badge with avatar -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-purple-600 dark:text-purple-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
      <span class="text-sm font-semibold whitespace-nowrap">New Update</span>
      <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800 
                   dark:bg-purple-800 dark:text-purple-200 
                   shadow-inner">PRO</span>
    </button>

     <!-- Tag with image/icon -->
     <button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-indigo-600 dark:text-indigo-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
      <img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
      <span class="text-sm font-semibold whitespace-nowrap">Website</span>
    </button>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
  }

  /* Inset styles for pushed/active state */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
  }

  /* Add a subtle animation for the active dot */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Ensure all transitions are smooth */
  .transition-colors {
    transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
</style>

3D_Badge_Component

Un composant de badge simple et réactif inspiré de la 3D pour le blog/le contenu, avec des couleurs très contrastées et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

    <!-- Badge 1: Category -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-purple-500 before:to-pink-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-purple-700 dark:text-purple-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Category
      </span>
    </div>

    <!-- Badge 2: Featured -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-blue-500 before:to-green-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-blue-700 dark:text-blue-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Featured
      </span>
    </div>

    <!-- Badge 3: New -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-red-500 before:to-orange-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-red-700 dark:text-red-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        New
      </span>
    </div>

    <!-- Badge 4: Popular -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-yellow-500 before:to-lime-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-yellow-700 dark:text-yellow-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Popular
      </span>
    </div>

    <!-- Badge 5: Trending -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-cyan-500 before:to-emerald-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-cyan-700 dark:text-cyan-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Trending
      </span>
    </div>

    <!-- Badge 6: Draft -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-400 before:to-gray-600 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-gray-600 dark:text-gray-400
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Draft
      </span>
    </div>

  </div>
</div>

Composant des badges financiers

Un composant de badges financiers au design minimaliste et plat utilisant des tons océan/bleu, adapté aux interfaces financières et bancaires. Il dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-950 min-h-screen font-sans text-gray-800 dark:text-gray-100 transition-colors duration-300">
  <div class="max-w-6xl mx-auto space-y-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-50 tracking-tight text-center">
      Your Financial Badges
    </h1>
    <p class="text-lg text-center text-blue-700 dark:text-blue-200 mb-8">
      Track your achievements and financial milestones.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Badge 1: Top Saver -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-blue-600 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-blue-700 dark:text-blue-300" 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 19V6l12-3v13m-6 3V9M3 19V6l12-3v13M3 19l6 3m-6-3h12m-9 3l9 3M3 6h12l-3-3H3c-.621 0-1-.379-1-1v-4a1 1 0 011-1h18a1 1 0 011 1v4a1 1 0 01-1 1h-2m-10 3v4a1 1 0 001 1h16a1 1 0 001-1v-4a1 1 0 00-1-1H7z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Top Saver</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Achieved 10% more savings than your monthly goal for 6 consecutive months.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-100">Earned: Jan 15, 2024</span>
      </div>

      <!-- Badge 2: Budget Master -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-teal-500 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-teal-100 dark:bg-teal-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-teal-700 dark:text-teal-300" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Budget Master</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Stayed within your monthly budget limits for 3 consecutive quarters.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-teal-100 text-teal-700 dark:bg-teal-800 dark:text-teal-100">Earned: Feb 28, 2024</span>
      </div>

      <!-- Badge 3: Investment Pioneer -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-indigo-500 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-indigo-700 dark:text-indigo-300" 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 12l3-3 3 3 4-4M3 21h18M12 4V3m-9 7h1.01M16 4h.01M6 21v-7a2 2 0 012-2h4a2 2 0 012 2v7m-4 0v-5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5h6z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Investment Pioneer</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Made your first 5 successful investments with positive returns.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-100">Earned: Mar 10, 2024</span>
      </div>

      <!-- Badge 4: Debt Slayer -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-red-500 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-red-700 dark:text-red-300" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Debt Slayer</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Successfully paid off 50% or more of your total consumer debt.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-100">Earned: Apr 05, 2024</span>
      </div>

      <!-- Badge 5: Emergency Fund Builder -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-emerald-500 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-emerald-700 dark:text-emerald-300" 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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 14V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v16M4 20h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Emergency Fund Builder</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Successfully funded 3 months of living expenses in your emergency fund.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-800 dark:text-emerald-100">Earned: May 01, 2024</span>
      </div>

      <!-- Badge 6: Credit Score Climber -->
      <div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
        <div class="absolute top-0 left-0 right-0 h-2 bg-sky-500 rounded-t-xl"></div>
        <div class="w-24 h-24 rounded-full bg-sky-100 dark:bg-sky-900 flex items-center justify-center mb-4 transition-colors duration-300">
          <svg class="w-12 h-12 text-sky-700 dark:text-sky-300" 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="M13 7h6l3 3v8h-4v2h-8v-2H1v-8l3-3h6m0 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h8a2 2 0 002-2V9m6 0h2v9a2 2 0 01-2 2h-2m-8-8c1.657 0 3-.895 3-2s-1.343-2-3-2V7h-3v4"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Credit Score Climber</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Increased your credit score by 50 points or more within a year.</p>
        <span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-sky-100 text-sky-700 dark:bg-sky-800 dark:text-sky-100">Earned: Jun 12, 2024</span>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300">
        Explore More Achievements
        <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </div>
  </div>
</div>

Memphis_Pastel_Food_Badges_Component

Un composant de badges complexe et réactif pour les sites Web de restauration, inspiré de Memphis Design avec une palette de couleurs pastel. Présente des formes géométriques, des motifs ludiques et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-950 dark:via-pink-950 dark:to-yellow-950 min-h-screen font-sans">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-200 mb-8 sm:mb-12 text-center relative z-10">
    <span class="block relative z-10">Today's Specials <span class="text-pink-600 dark:text-pink-400">&amp;</span> Perks!</span>
    <span class="absolute inset-x-0 bottom-0 h-4 bg-yellow-300 dark:bg-yellow-700 transform -skew-x-12 origin-top-left z-0"></span>
  </h2>

  <!-- Badges Container Grid -->
  <div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Badge 1: Discount -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-pink-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 -left-8 w-24 h-24 bg-pink-300 dark:bg-pink-700 rounded-full opacity-70 group-hover:rotate-45 transition-transform duration-500"></div>
      <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-200 dark:bg-purple-600 rounded-lg transform rotate-12 opacity-70 group-hover:-rotate-12 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-pink-500 dark:text-pink-400 mb-4 transform rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">25%</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Off Your First Order!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Enjoy a fantastic saving on your initial culinary adventure.</p>
        <button class="px-6 py-3 bg-purple-500 dark:bg-purple-700 text-white rounded-full font-semibold shadow-md hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300 transform -skew-x-6">
          Claim Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 transform -rotate-12 text-lg font-bold">⭐ Hot Deal!</span>
      </div>
    </div>

    <!-- Badge 2: Free Delivery -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-yellow-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -right-10 w-28 h-28 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-70 group-hover:-translate-y-2 transition-transform duration-500"></div>
      <div class="absolute -bottom-8 -left-8 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-xl transform -rotate-6 opacity-70 group-hover:rotate-6 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-green-500 dark:text-green-400 mb-4 transform -rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">🚚</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Free Delivery!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">No delivery fees on orders over $25. Get your food delivered for free.</p>
        <button class="px-6 py-3 bg-yellow-500 dark:bg-yellow-700 text-white rounded-full font-semibold shadow-md hover:bg-yellow-600 dark:hover:bg-yellow-800 transition duration-300 transform skew-x-6">
          Order Now!
        </button>
        <span class="absolute top-2 left-2 text-purple-500 dark:text-purple-400 transform rotate-12 text-lg font-bold">🎉 Limited Time!</span>
      </div>
    </div>

    <!-- Badge 3: Loyalty Program -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-purple-500/20 border-4 border-purple-300 dark:border-purple-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-6 left-1/4 w-20 h-20 bg-purple-300 dark:bg-purple-700 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 right-1/4 w-24 h-24 bg-yellow-200 dark:bg-yellow-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute top-1/2 left-3 w-16 h-4 bg-pink-400 dark:bg-pink-700 transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-purple-500 dark:text-purple-400 mb-4 transform -skew-y-3 origin-center group-hover:skew-y-0 transition-transform duration-300">💎</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Loyalty Rewards</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Earn points with every purchase and redeem them for exclusive discounts.</p>
        <button class="px-6 py-3 bg-pink-500 dark:bg-pink-700 text-white rounded-full font-semibold shadow-md hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform -skew-x-6">
          Join Now!
        </button>
        <span class="absolute bottom-2 right-2 text-orange-500 dark:text-orange-400 text-lg font-bold">⭐ VIP Perks!</span>
      </div>
    </div>

    <!-- Badge 4: Special Dish Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-green-500/20 border-4 border-orange-300 dark:border-orange-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-4 -right-4 w-20 h-20 bg-orange-300 dark:bg-orange-700 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>
      <div class="absolute bottom-2 left-2 w-16 h-16 bg-green-200 dark:bg-green-600 rounded-xl transform rotate-45 opacity-70 group-hover:-rotate-45 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Spicy Noodles" class="w-24 h-24 rounded-full object-cover border-4 border-yellow-400 dark:border-yellow-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Chef's Spicy Noodles!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A fiery blend of flavors, our new special is a must-try!</p>
        <button class="px-6 py-3 bg-green-500 dark:bg-green-700 text-white rounded-full font-semibold shadow-md hover:bg-green-600 dark:hover:bg-green-800 transition duration-300 transform skew-x-6">
          View Dish
        </button>
        <span class="absolute top-2 right-2 text-red-500 dark:text-red-400 font-bold text-xl">🌶️ New!</span>
      </div>
    </div>

    <!-- Badge 5: Limited Time Offer -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-red-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -left-10 w-28 h-28 bg-red-300 dark:bg-red-700 rounded-lg transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-purple-200 dark:bg-purple-600 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <span class="text-6xl font-black text-red-500 dark:text-red-400 mb-4 transform scale-90 group-hover:scale-100 transition-transform duration-300 rotate-6">⏳</span>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Flash Sale!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Selected items at 30% off for the next 24 hours only!</p>
        <button class="px-6 py-3 bg-red-500 dark:bg-red-700 text-white rounded-full font-semibold shadow-md hover:bg-red-600 dark:hover:bg-red-800 transition duration-300 transform -skew-x-6">
          Shop Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">⏰ Hurry!</span>
      </div>
    </div>

    <!-- Badge 6: New Restaurant Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-blue-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 right-1/4 w-24 h-24 bg-blue-300 dark:bg-blue-700 rounded-xl opacity-70 group-hover:rotate-90 transition-transform duration-500"></div>
      <div class="absolute -bottom-4 left-1/4 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=2" alt="Restaurant Icon" class="w-24 h-24 rounded-full object-cover border-4 border-purple-400 dark:border-purple-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Newcomer: "Flavor Fiesta"</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Discover authentic Mexican cuisine, now available for delivery!</p>
        <button class="px-6 py-3 bg-blue-500 dark:bg-blue-700 text-white rounded-full font-semibold shadow-md hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform skew-x-6">
          Explore Dishes
        </button>
        <span class="absolute bottom-2 left-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">✨ Fresh!</span>
      </div>
    </div>

  </div>

  <!-- Call to Action / Footer Section -->
  <div class="mt-12 sm:mt-16 md:mt-20 text-center">
    <p class="text-lg text-purple-800 dark:text-purple-200 mb-4">
      Ready to indulge? Explore more delicious deals!
    </p>
    <a href="#" class="inline-block px-8 py-4 bg-pink-500 dark:bg-pink-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform hover:scale-105 -skew-x-6 dark:shadow-pink-500/30">
      See All Offers!
      <span class="ml-2 inline-block transform group-hover:translate-x-1 transition-transform duration-300">→</span>
    </a>
  </div>

</div>

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.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Title (Optional) -->
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-8 sm:mb-12 text-gray-900 dark:text-gray-100">
    Featured Product Badges
  </h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Badge Card 1: New Arrival -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Forest Product">
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-emerald-500 to-green-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🚀 New Arrival
        </span>
      </div>
      <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Organic Green Tea</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Premium hand-picked tea leaves from sustainable farms.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">$19.99</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-lime-500 to-emerald-500 text-white font-medium shadow-md hover:from-lime-600 hover:to-emerald-600 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 2: Limited Stock / Sale -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1020/600/400" alt="Nature Product">
      <div class="absolute top-4 right-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-red-500 to-orange-500 shadow-md animate-pulse transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🔥 Limited Stock
        </span>
      </div>
      <div class="absolute bottom-4 left-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tr from-purple-500 to-pink-500 shadow-sm">
          Sale -20%
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Bamboo Eco Toothbrush</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Sustainable alternative for your daily dental care.</p>
        <div class="flex justify-between items-center">
          <div>
            <span class="text-lg font-semibold line-through text-gray-400 dark:text-gray-500 mr-2">$9.99</span>
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$7.99</span>
          </div>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 text-white font-medium shadow-md hover:from-emerald-700 hover:to-teal-800 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 3: Bestseller / Eco-Friendly -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1025/600/400" alt="River Product">
      <div class="absolute top-0 right-0 p-4">
        <svg class="w-10 h-10 text-yellow-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </div>
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🏆 Bestseller
        </span>
      </div>
      <div class="absolute bottom-4 right-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tl from-green-400 to-blue-400 shadow-sm">
          🌱 Eco-Friendly
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Reusable Water Bottle</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Durable, insulated, and stylish for everyday hydration.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">$29.50</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-700 to-green-800 text-white font-medium shadow-md hover:from-emerald-800 hover:to-green-900 transform hover:scale-105 transition-all duration-300 ease-in-out">
            View Details
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Healthcare_Badges_Component_Bauhaus

Un composant de badges sur le thème de la santé avec un design inspiré du Bauhaus, utilisant des tons coucher de soleil/chauds. Il présente des formes géométriques et une disposition fonctionnelle, adaptées à l’affichage de l’état ou des catégories dans les applications médicales. Réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Title -->
  <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-600 dark:text-orange-400 mb-6 sm:mb-8 text-center">
    Healthcare Badges
  </h2>

  <!-- Badges Container -->
  <div class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Badge 1: Active Patient -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-orange-500 dark:border-orange-600 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-red-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-200 dark:bg-orange-700 text-orange-700 dark:text-orange-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 9.09V15c0 3.088 1.442 6.002 3.963 8.09a2.768 2.768 0 00-.038-5.328 2.768 2.768 0 01-.038-5.328V12c0-.528.086-1.037.245-1.523A10.873 10.873 0 0112 4.148zm0 0V2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 9.09V15c0 3.088 1.442 6.002 3.963 8.09a2.768 2.768 0 00-.038-5.328 2.768 2.768 0 01-.038-5.328V12c0-.528.086-1.037.245-1.523A10.873 10.873 0 0112 4.148zM12 21a9 9 0 100-18 9 9 0 000 18z"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-yellow-700 dark:text-yellow-300">Active Patient</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Patient records currently undergoing active treatment or monitoring within the facility.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-full shadow-inner">
        Status: Admitted
      </span>
    </div>

    <!-- Badge 2: Upcoming Appointment -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-yellow-500 dark:border-yellow-600 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-orange-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-200 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M8 7V3m8 4V3m-9 8h8M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-orange-700 dark:text-orange-300">Upcoming Appointment</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Scheduled visits for patients awaiting consultation or follow-up with medical professionals.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 rounded-full shadow-inner">
        Date: 25/07/2024
      </span>
    </div>

    <!-- Badge 3: Medical Alert -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-red-500 dark:border-red-600 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-yellow-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-red-200 dark:bg-red-700 text-red-700 dark:text-red-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-red-700 dark:text-red-300">Medical Alert</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Critical information or special conditions requiring immediate attention for patient care.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 rounded-full shadow-inner">
        Type: Allergy
      </span>
    </div>

    <!-- Badge 4: Completed Consultations -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-yellow-600 dark:border-yellow-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-red-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-300 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-orange-800 dark:text-orange-200">Consultations Done</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Records of medical consultations that have been successfully completed and documented.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full shadow-inner">
        Validated: Yes
      </span>
    </div>

    <!-- Badge 5: Prescription Refill -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-orange-700 dark:border-orange-800 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-yellow-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-300 dark:bg-orange-700 text-orange-800 dark:text-orange-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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 8h10M7 12h10M7 16h10M9 6v10m0 0a2 2 0 10-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2m0 0V8m0 4a2 2 0 11-2-2h-2a2 2 0 01-2 2v2a2 2 0 012 2h2a2 2 0 012-2m0 0V8"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-red-800 dark:text-red-200">Prescription Refill</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Requests for medication refills, requiring approval and processing by pharmacy staff.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-full shadow-inner">
        Status: Pending
      </span>
    </div>

    <!-- Badge 6: Lab Results Pending -->
    <div class="p-5 sm:p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl border-b-4 border-red-700 dark:border-red-800 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-orange-900/50">
      <div class="flex items-center mb-3 sm:mb-4">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
          <svg class="w-6 h-6 sm:w-7 sm:h-7" 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 13h10m-3 3v3m2-3v3m-2-3H9m5 0h-2m2-3V7m2-3h-2v3m-2-3H9v3m2-3v-3m2 3v-3m2 3h-2v3m-2-3H9v3m5-3V7m2-3h-2v3m-2-3H9v3m5-3V7m2-3h-2v3m-2-3H9v3m5-3V7l-2-2-2 2V7l-2-2-2 2V7l-2-2-2 2V7m4 12V7h-4V19m0 0a2 2 0 002 2h2a2 2 0 002-2m-8 0v-6m0-4V7h-4v6m0 0a2 2 0 002 2h2a2 2 0 002-2M7 13h10m-3 3v3m2-3v3m-2-3H9m5 0h-2m2-3V7m2-3h-2v3m-2-3H9v3m5-3V7m2-3h-2v3m-2-3H9v3m5-3V7m2-3h-2v3m-2-3H9v3m5-3V7l-2-2-2 2V7l-2-2-2 2V7l-2-2-2 2V7m4 12V7H9v12m0-4a2 2 0 002 2h2a2 2 0 002-2m0 0v-6m0-4V7h4v6m0 0a2 2 0 002 2h2a2 2 0 002-2"></path>
          </svg>
        </div>
        <h3 class="text-xl sm:text-2xl font-semibold text-yellow-800 dark:text-yellow-200">Lab Results Pending</h3>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-4">
        Indicates laboratory test results that are currently being processed or are awaiting review.
      </p>
      <span class="inline-block px-3 py-1 text-xs sm:text-sm font-medium bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 rounded-full shadow-inner">
        Status: In Progress
      </span>
    </div>

  </div>
</div>

Composant Microinteractions Badges

Un composant de badges complexe et réactif aux couleurs pastel, conçu pour le conseil/les services, avec des micro-interactions au survol et la prise en charge du mode sombre. Chaque badge s’agrandit légèrement au survol pour révéler plus de contexte.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen p-8 sm:p-12 font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-6 sm:mb-8 text-purple-800 dark:text-purple-300">
      Our Expertise
    </h2>
    <p class="text-lg sm:text-xl text-center mb-12 max-w-2xl mx-auto text-gray-600 dark:text-gray-400">
      Explore the diverse areas where our strategic advice can elevate your business. Hover to learn more.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">

      <!-- Badge 1: Strategic Planning -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-purple-200 dark:border-purple-800 focus-within:ring-4 focus-within:ring-purple-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-purple-100 dark:bg-purple-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-purple-600 dark:text-purple-400" 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-2zm0 8h2v2h-2z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">
            Strategic Planning
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Crafting tailored roadmaps for sustainable growth and market leadership.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Strategic Planning"></a>
      </div>

      <!-- Badge 2: Digital Transformation -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-blue-200 dark:border-blue-800 focus-within:ring-4 focus-within:ring-blue-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-blue-100 dark:bg-blue-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v10c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm4 14H6V8h8v10z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-blue-700 dark:text-blue-300">
            Digital Transformation
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Guiding your business through technological evolution for efficiency and innovation.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Digital Transformation"></a>
      </div>

      <!-- Badge 3: Operational Excellence -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-green-200 dark:border-green-800 focus-within:ring-4 focus-within:ring-green-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-green-100 dark:bg-green-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-green-600 dark:text-green-400" 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-green-700 dark:text-green-300">
            Operational Excellence
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Streamlining processes and optimizing workflows for peak performance and reduced costs.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Operational Excellence"></a>
      </div>

      <!-- Badge 4: Market Research & Analytics -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-yellow-200 dark:border-yellow-800 focus-within:ring-4 focus-within:ring-yellow-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-yellow-100 dark:bg-yellow-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.5 10H15v2h-1.5zM10.5 10h1.5v2h-1.5zM12 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-3-11h1.5v4H9v-4zm-3 0h1.5v4H6v-4z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-yellow-700 dark:text-yellow-300">
            Market Research
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Providing deep insights into market trends and customer behavior for informed decisions.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Market Research & Analytics"></a>
      </div>

      <!-- Badge 5: Financial Advisory -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-red-200 dark:border-red-800 focus-within:ring-4 focus-within:ring-red-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-red-100 dark:bg-red-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-red-600 dark:text-red-400" 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-14h2c1.38 0 2.5 1.12 2.5 2.5a2.5 2.5 0 01-5 0c0-1.38 1.12-2.5 2.5-2.5zm0 9.5c0 .83-.67 1.5-1.5 1.5S9 12.33 9 11.5 9.67 10 10.5 10s1.5.67 1.5 1.5zM13.5 13.5c0 .83-.67 1.5-1.5 1.5S11 14.33 11 13.5 11.67 12 12.5 12s1.5.67 1.5 1.5z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-red-700 dark:text-red-300">
            Financial Advisory
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Expert guidance on capital management, investments, and fiscal health.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Financial Advisory"></a>
      </div>

      <!-- Badge 6: Human Capital Management -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-orange-200 dark:border-orange-800 focus-within:ring-4 focus-within:ring-orange-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-orange-100 dark:bg-orange-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-orange-600 dark:text-orange-400" 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 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.83 6-3.83s5.97 1.84 6 3.83c-1.29 1.94-3.5 3.22-6 3.22z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-orange-700 dark:text-orange-300">
            Human Capital
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Developing and retaining top talent to fuel your organization's success.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Human Capital Management"></a>
      </div>

    </div>
  </div>
</div>

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.

Ouvrir Aperçu

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

OrganicNatureInspiredBadges

Un composant de badges de complexité modérée avec des lignes fluides inspirées de la nature et une palette de couleurs triadique, adapté à un portfolio pour présenter des travaux ou des produits. Il inclut la réactivité et la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-12 sm:py-16 dark:bg-gray-900 bg-white">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-teal-700 dark:text-teal-400 mb-4 tracking-tight leading-tight">
        Our Natural Showcase
      </h2>
      <p class="mt-4 text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
        Discover the organic growth and natural flow of our creative endeavors, each badge representing a unique facet of our work.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Badge 1: Leaf Green - Primary focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-lime-50 dark:from-lime-950 to-lime-100 dark:to-lime-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-lime-200 dark:border-lime-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/nature1/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-lime-600 dark:bg-lime-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 4.636l-.707.707M3 12H2m8.88-9.88a6.364 6.364 0 0115.004-.515M12 16.5c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-lime-800 dark:text-lime-300 mb-2">Sustainable Design</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Crafting eco-conscious solutions that blossom with environmental integrity.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-lime-800 bg-lime-200 hover:bg-lime-300 dark:bg-lime-700 dark:text-white dark:hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 transition-all duration-300 ease-in-out group-hover:px-6">
            Explore Branch
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 2: Ocean Blue - Complementary focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-blue-50 dark:from-blue-950 to-blue-100 dark:to-blue-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-blue-200 dark:border-blue-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/ocean2/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-600 dark:bg-blue-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 8a8 8 0 01-8-8H4a10 10 0 0015-6c-1.666 4-6 8-11 8z" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-300 mb-2">Fluid Innovations</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Designing with an adaptive approach, like water finding its path, for seamless experiences.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-blue-800 bg-blue-200 hover:bg-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out group-hover:px-6">
            Dive Deeper
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 3: Sunset Orange - Accent/Highlight focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-orange-50 dark:from-orange-950 to-orange-100 dark:to-orange-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-orange-200 dark:border-orange-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/sunset3/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-orange-600 dark:bg-orange-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 3.197m0 0a5 5 0 01-7.07-7.07l3.196-3.197m0 0a5 5 0 017.07 7.07l-3.196 3.197m0 0l-3.197 3.197m7.07-7.07l3.197-3.197m0 0a5 5 0 00-7.07-7.07l-3.197 3.197m0 0a5 5 0 007.07 7.07l3.197-3.197M14.752 11.168a5 5 0 01-7.072-7.072m7.072 7.072a5 5 0 00-7.072 7.072" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2">Vibrant Storytelling</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Illuminating narratives with captivating visuals and warm, engaging user experiences.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-orange-800 bg-orange-200 hover:bg-orange-300 dark:bg-orange-700 dark:text-white dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition-all duration-300 ease-in-out group-hover:px-6">
            View Radiance
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

    </div>
  </div>

  <!-- Optional: A natural, flowing divider or footer element -->
  <div class="mt-16 sm:mt-20 text-center">
    <p class="text-gray-500 dark:text-gray-400 text-sm italic">
      "Nature does not hurry, yet everything is accomplished." - Lao Tzu
    </p>
  </div>
</section>

Composant Badges

Un composant de badges épuré et minimaliste conçu pour les systèmes de réservation, avec une mise en page réactive, une palette de couleurs pastel et une prise en charge du mode sombre, inspiré de la typographie suisse et internationale.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto py-8 sm:py-12">
    <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center tracking-tight text-gray-900 dark:text-gray-50">
      Your Upcoming Bookings
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Badge 1: Confirmed Appointment -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50 animate-pulse-slow">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-green-700 dark:text-green-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
            Confirmed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Dental Check-up</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Dr. Alice Smith</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Oct 26, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>10:00 AM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            View Details
            <svg class="ml-2 -mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 2: Pending Reservation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-yellow-700 dark:text-yellow-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.624-1.3 3.389 0l7.25 12.482A1.5 1.5 0 0118.25 17H1.75a1.5 1.5 0 01-1.301-2.19l7.25-12.482zM10 13a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
            Pending
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Restaurant Table Booking</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">The Fancy Bistro</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Nov 15, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>7:30 PM (4 Guests)</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Review / Cancel
          </a>
        </div>
      </div>

      <!-- Badge 3: Completed Session -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-indigo-700 dark:text-indigo-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.38-.72.588-1.81l3.462-.002a1 1 0 00.95-.69L9.049 2.927z" />
            </svg>
            Completed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Yoga Session</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Zen Flow Studio</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Sep 20, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>6:00 PM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Leave Feedback
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* This is for the pulsating effect on the 'Confirmed' badge only */
  @keyframes pulse-slow {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }
</style>