Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Cartes thermiques

Un composant de carte thermique minimaliste et plat pour les tableaux de bord, avec une palette de couleurs complémentaires, une mise en page réactive et la prise en charge du mode sombre. Affiche les niveaux d’activité au fil du temps.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Activity Heatmap</h2>
      <p class="text-gray-600 dark:text-gray-400">Daily activity over the last year.</p>
    </div>

    <div class="p-6 sm:p-8">
      <div class="flex justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-2 sm:mb-4">
        <span>Mon</span>
        <span>Wed</span>
        <span>Fri</span>
      </div>

      <div class="grid grid-flow-col auto-cols-min sm:auto-cols-max gap-1 sm:gap-1.5 md:gap-2 overflow-x-auto pb-4 scrollbar-hide">
        <!-- Loop for months - ideally this would be dynamic -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jan</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <!-- Loop for days in January -->
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 2: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 3: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 4: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 5: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 6: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 7: 0 activity"></div>
            </div>
        </div>

        <!-- Example Month Blocks (repeated and varied for visual effect) -->
        <!-- Add more blocks for remaining months, varying colors for dummy data -->
        <!-- February -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Feb</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 2: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 3: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 4: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 5: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 6: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 7: 1 activity"></div>
            </div>
        </div>

        <!-- March -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Mar</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 1: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 2: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 3: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 4: 21 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 5: 28 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 6: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 7: 4 activity"></div>
            </div>
        </div>

        <!-- April -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Apr</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 1: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 2: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 3: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 4: 26 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 5: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 6: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 7: 8 activity"></div>
            </div>
        </div>

        <!-- May -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">May</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 1: 11 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 2: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 3: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 5: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 6: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 7: 14 activity"></div>
            </div>
        </div>

         <!-- ... Continue for remaining months ensuring enough columns for full year -->
        <!-- June -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jun</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 1: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 2: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 3: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 4: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 5: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 6: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 7: 20 activity"></div>
            </div>
        </div>

        <!-- July -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jul</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 1: 27 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 2: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 3: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 4: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 5: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 6: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 7: 23 activity"></div>
            </div>
        </div>

        <!-- August -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Aug</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 2: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 3: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 4: 13 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 5: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 6: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 7: 0 activity"></div>
            </div>
        </div>

        <!-- September -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Sep</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 1: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 2: 8 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 3: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 4: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 5: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 6: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 7: 4 activity"></div>
            </div>
        </div>

        <!-- October -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Oct</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 1: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 2: 11 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 3: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 4: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 5: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 6: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 7: 9 activity"></div>
            </div>
        </div>

        <!-- November -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Nov</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 1: 13 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 2: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 3: 26 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 5: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 6: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 7: 12 activity"></div>
            </div>
        </div>

        <!-- December -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Dec</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 1: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 2: 21 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 3: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 4: 4 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 5: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 6: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 7: 19 activity"></div>
            </div>
        </div>

        <!-- Add more columns to represent ~52 weeks for a full year. For demonstration, we'll repeat a block. -->
        <!-- Repeat previous month blocks as columns to fill out roughly a year's worth of data -->
        <!-- Repeating these for visual example, ideally this would be real data -->
        <!-- This represents a week's worth of data for a specific day of the week over the year -->
        <!-- Total columns should be ~52 if each column represents a week -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 1: 8 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 2: 15 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 3: 20 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 4: 25 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 5: 18 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 6: 10 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 7: 5 activity"></div>
          </div>
        </div>

        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 2: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 3: 4 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 4: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 5: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 6: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 7: 23 activity"></div>
          </div>
        </div>
        <!-- More columns to fill up to approximately 52 for a full year -->
        <!-- This includes 12 explicit month blocks + 2 dummy blocks, so 14 total. Need ~38 more to make 52. -->
        <!-- For brevity, we'll stop here but in a real app, logic would generate 52 weeks -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 1: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 2: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 3: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 5: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 6: 8 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 7: 13 activity"></div>
          </div>
        </div>

        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 1: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 2: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 3: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 4: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 5: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 6: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 7: 20 activity"></div>
          </div>
        </div>

      </div>

      <div class="flex justify-end items-center text-xs text-gray-500 dark:text-gray-400 mt-4">
        <span class="mr-2">Less</span>
        <div class="flex gap-1">
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-gray-200 dark:bg-gray-700 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-100 dark:bg-blue-900 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-300 dark:bg-blue-700 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-500 dark:bg-blue-500 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-700 dark:bg-blue-300 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-800 dark:bg-blue-200 rounded-sm"></div>
        </div>
        <span class="ml-2">More</span>
      </div>
    </div>
  </div>
</div>

<style>
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
</style>

Composant Composants de rétroaction

Une section complexe et réactive de commentaires et de témoignages pour les sites Web d’entreprise, conçue avec une interface utilisateur en mode sombre et une palette de couleurs pastel. Comprend plusieurs éléments interactifs tels que des témoignages, un formulaire de contact et un affichage des évaluations.

Ouvrir Aperçu

                <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900 dark:bg-gray-950 text-gray-200 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-blue-200 dark:text-blue-300">
      What Our Clients Say
    </h2>

    <!-- Testimonials Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
      <div class="bg-purple-800 dark:bg-purple-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-purple-400 dark:border-purple-300" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-purple-100 dark:text-purple-200">"Their dedication to quality and innovative solutions is unparalleled. We saw significant growth after implementing their strategies."</p>
        <p class="font-semibold text-purple-300 dark:text-purple-400">John Doe, CEO of InnovateCorp</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-blue-800 dark:bg-blue-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-blue-400 dark:border-blue-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-blue-100 dark:text-blue-200">"The partnership has been incredibly smooth. Their team is highly responsive and delivered beyond our expectations."</p>
        <p class="font-semibold text-blue-300 dark:text-blue-400">Jane Smith, Marketing Director at GrowthCo</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-teal-800 dark:bg-teal-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-teal-400 dark:border-teal-300" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-teal-100 dark:text-teal-200">"An absolute pleasure to work with. They transformed our digital presence and boosted our ROI significantly."</p>
        <p class="font-semibold text-teal-300 dark:text-teal-400">David Lee, Founder of DigitalEdge</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
    </div>

    <!-- Overall Rating Section -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 mb-16 text-center transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl font-bold mb-4 text-pink-200 dark:text-pink-300">Overall Customer Satisfaction</h3>
      <div class="flex items-center justify-center mb-4">
        <span class="text-6xl font-extrabold text-pink-300 dark:text-pink-400 mr-4">4.9</span>
        <div class="flex text-yellow-300 dark:text-yellow-400">
          <svg class="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
      <p class="text-lg text-gray-300 dark:text-gray-400">Based on 1500+ reviews across various platforms</p>
    </div>

    <!-- Feedback Form -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 lg:p-12 transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-8 text-green-200 dark:text-green-300">Share Your Experience</h3>
      <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:col-span-1">
          <label for="name" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Name</label>
          <input type="text" id="name" name="name" placeholder="Enter your name" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-1">
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Email</label>
          <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="subject" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Subject</label>
          <input type="text" id="subject" name="subject" placeholder="Subject of your feedback" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="message" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Message</label>
          <textarea id="message" name="message" rows="6" placeholder="Tell us about your experience..." class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 resize-y"></textarea>
        </div>

        <div class="md:col-span-2">
          <label for="rating" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Rate Us</label>
          <div class="flex justify-center text-yellow-300 dark:text-yellow-400 mb-6">
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star current-rating outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current text-gray-600 dark:text-gray-500 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
          </div>
        </div>

        <div class="md:col-span-2 text-center">
          <button type="submit" class="px-8 py-4 bg-green-500 dark:bg-green-600 text-white font-bold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- JavaScript for Rating functionality (optional, for interactivity demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const starsContainer = document.querySelector('.rating-star').parentNode;
      const stars = starsContainer.querySelectorAll('.rating-star');

      stars.forEach((star, index) => {
        star.addEventListener('click', () => {
          // Fill stars up to the clicked one
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseover', () => {
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseout', () => {
          // Reset to default (or last clicked state) if no star is clicked
          const currentRating = Array.from(stars).filter(s => s.querySelector('svg').classList.contains('text-yellow-300')).length || 0;
          stars.forEach((s, sIndex) => {
            if (sIndex < currentRating) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });
      });
    });
  </script>
</section>

Skeuomorphic_Vibrant_Business_Dashboard

Un composant de tableau de bord complexe, réactif et skeuomorphe aux couleurs vives, conçu pour une utilisation professionnelle/d’entreprise, avec des visualisations de données et des éléments interactifs avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Main Metrics Panel -->
    <div class="lg:col-span-2 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 drop-shadow-md">Business Overview Dashboard</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Metric Card 1 -->
        <div class="bg-gradient-to-br from-indigo-300 to-indigo-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-indigo-700 dark:to-indigo-900 dark:border-indigo-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Total Revenue</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">$1.2M</p>
          <p class="text-sm text-white opacity-80">+12% from last month</p>
        </div>
        <!-- Metric Card 2 -->
        <div class="bg-gradient-to-br from-green-300 to-green-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-green-700 dark:to-green-900 dark:border-green-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">New Customers</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A4 4 0 013 11a1 1 0 10-2 0 6 6 0 006 6h6a6 6 0 006-6 1 1 0 10-2 0 4 4 0 01-4 4H7z"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">2,450</p>
          <p class="text-sm text-white opacity-80">+8% from last week</p>
        </div>
         <!-- Metric Card 3 -->
        <div class="bg-gradient-to-br from-red-300 to-red-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-red-700 dark:to-red-900 dark:border-red-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Churn Rate</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">4.5%</p>
          <p class="text-sm text-white opacity-80">-1% from last month</p>
        </div>
         <!-- Metric Card 4 -->
        <div class="bg-gradient-to-br from-purple-300 to-purple-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-purple-700 dark:to-purple-900 dark:border-purple-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Active Users</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">18,700</p>
          <p class="text-sm text-white opacity-80">+5% from yesterday</p>
        </div>
      </div>

      <!-- Chart Placeholder -->
      <div class="mt-8 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
        <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Monthly Performance</h3>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">This chart represents the projected growth and actual performance over the last 12 months.</p>
      </div>
    </div>

    <!-- Recent Activities Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-teal-800 dark:text-teal-400 mb-6 drop-shadow-md">Recent Activities</h2>

      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe <span class="text-green-600 dark:text-green-400">completed task</span> 'Project X launch'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="text-purple-600 dark:text-purple-400">updated report</span> 'Q3 Financials'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">15 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Ross <span class="text-red-600 dark:text-red-400">added new lead</span> 'Acme Corp.' to CRM</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">30 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 4 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Lee <span class="text-blue-600 dark:text-blue-400">scheduled meeting</span> 'Team Sync'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- Sales Funnel Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 drop-shadow-md">Sales Funnel Progress</h2>
      <div class="space-y-4">
        <!-- Stage 1 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Leads:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 90%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">90%</span>
          </div>
        </div>
        <!-- Stage 2 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Engaged:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 70%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">70%</span>
          </div>
        </div>
        <!-- Stage 3 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Proposals:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 50%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">50%</span>
          </div>
        </div>
        <!-- Stage 4 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Closed Won:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 30%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">30%</span>
          </div>
        </div>
         <!-- Chart Placeholder -->
        <div class="mt-6 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
          <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Conversion Rate</h3>
          <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Doughnut Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Overall conversion rate from lead to closed-won customer.</p>
        </div>
      </div>
    </div>

    <!-- Quick Actions Panel -->
    <div class="md:col-span-2 lg:col-span-1 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-cyan-800 dark:text-cyan-400 mb-6 drop-shadow-md">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <!-- Action Button 1 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-cyan-300 to-cyan-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-cyan-700 dark:to-cyan-900 dark:border-cyan-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">New Report</span>
        </button>
        <!-- Action Button 2 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-yellow-300 to-yellow-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-yellow-700 dark:to-yellow-900 dark:border-yellow-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.06-.665.06-1a7.001 7.001 0 00-12 0c0 .335.014.673.06 1H.75c.08.748.514 1.42 1.174 1.932.712.519 1.597.858 2.503.858h.5l.003.012A9.95 9.95 0 0010 18a9.95 9.95 0 005.49-.706l.003-.012h.5c.906 0 1.791-.339 2.503-.858.66-.512 1.094-1.184 1.174-1.932h-.807z"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Manage Users</span>
        </button>
        <!-- Action Button 3 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-pink-300 to-pink-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-pink-700 dark:to-pink-900 dark:border-pink-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Settings</span>
        </button>
        <!-- Action Button 4 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-lime-300 to-lime-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-lime-700 dark:to-lime-900 dark:border-lime-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Export Data</span>
        </button>
      </div>
    </div>

  </div>
</div>

Composant Boutons

Une collection de boutons minimalistes et au design plat pour diverses actions, en utilisant une palette de couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 bg-white dark:bg-gray-900 shadow-lg rounded-lg max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 text-gray-900 dark:text-white">Action Buttons</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Primary Button (Text) -->
      <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-800">
        Primary Action
      </button>

      <!-- Secondary Button (Text) -->
      <button class="w-full py-3 px-6 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
        Secondary Action
      </button>

      <!-- Outline Button -->
      <button class="w-full py-3 px-6 border border-gray-400 hover:border-blue-600 text-gray-700 hover:text-blue-600 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200
                     dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:text-blue-500 dark:focus:ring-gray-700">
        Outline Button
      </button>

      <!-- Ghost Button -->
      <button class="w-full py-3 px-6 text-blue-600 hover:text-blue-800 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-100 dark:text-blue-500 dark:hover:text-blue-400 dark:focus:ring-blue-900">
        Ghost Button
      </button>

      <!-- Destructive Button -->
      <button class="w-full py-3 px-6 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-800">
        Delete Account
      </button>

      <!-- Disabled Button -->
      <button disabled class="w-full py-3 px-6 bg-gray-300 text-gray-500 font-semibold rounded-lg cursor-not-allowed
                   dark:bg-gray-700 dark:text-gray-500">
        Disabled Button
      </button>

      <!-- Button with Icon (Left) -->
      <button class="w-full py-3 px-6 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-800">
        <svg class="w-5 h-5" 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 4v16m8-8H4"></path>
        </svg>
        <span>Add Item</span>
      </button>

      <!-- Button with Icon (Right) -->
      <button class="w-full py-3 px-6 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:text-gray-900 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800">
        <span>Next Step</span>
        <svg class="w-5 h-5" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
        </svg>
      </button>

      <!-- Segmented Buttons / Toggle Group -->
      <div class="col-span-1 md:col-span-2 lg:col-span-1 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm overflow-hidden border border-gray-300 dark:border-gray-700">
          <button class="py-3 px-6 bg-blue-600 text-white font-semibold flex-1 rounded-l-lg
                         dark:bg-blue-700">
            Month
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 border-x border-gray-300
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:border-gray-700">
            Week
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 rounded-r-lg
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300">
            Day
          </button>
        </div>
      </div>

      <!-- Icon Button (Round) -->
      <button aria-label="Settings" class="w-12 h-12 bg-gray-300 hover:bg-gray-400 text-gray-700 font-semibold rounded-full shadow-md flex items-center justify-center transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 dark:focus:ring-gray-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </button>

      <!-- Floating Action Button (FAB) -->
      <button aria-label="Add New" class="fixed bottom-8 right-8 w-14 h-14 bg-pink-600 hover:bg-pink-700 text-white rounded-full shadow-lg flex items-center justify-center transform hover:scale-105 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-800">
        <svg class="w-7 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 4v16m8-8H4"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Skeuomorphic_Vibrant_Search_Box_Component

Un composant de champ de recherche de complexité modérée avec un design skeuomorphe, une palette de couleurs vives et une réactivité totale avec prise en charge du mode sombre, adapté aux sites de blog/contenu.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-4 sm:p-6 bg-gradient-to-br from-violet-200 to-fuchsia-200 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t-2 border-l-2 border-violet-300 dark:border-gray-600
      flex flex-col gap-4
      relative before:absolute before:inset-0 before:rounded-2xl before:shadow-[inset_0_0_8px_rgba(255,255,255,0.7),inset_0_0_15px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.2)]
      dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.6),inset_0_0_15px_rgba(255,255,255,0.05),0_8px_16px_rgba(0,0,0,0.3)]">

    <h2 class="text-center text-3xl font-extrabold text-indigo-800 dark:text-fuchsia-300 mb-4 drop-shadow-md
        relative before:absolute before:-left-2 before:-top-2 before:-bottom-2 before:-right-2 before:rounded-lg before:bg-indigo-300/30 dark:before:bg-gray-800/50 before:backdrop-blur-sm before:z-[-1] before:shadow-md">
      Find Your Inspiration
    </h2>

    <div class="relative z-10">
      <input type="search" placeholder="Search articles, topics or authors..."
        class="w-full py-3 px-5 pr-12 text-lg text-indigo-900 dark:text-gray-100 bg-violet-100 dark:bg-gray-800 rounded-full
               focus:outline-none focus:ring-4 focus:ring-violet-400 dark:focus:ring-fuchsia-500
               shadow-inner-sk place-content-center
               transition-all duration-300 ease-in-out
               border-t border-l border-violet-300 dark:border-gray-700
               relative before:absolute before:inset-0 before:rounded-full before:shadow-[inset_0_0_8px_rgba(0,0,0,0.05),inset_0_0_10px_rgba(255,255,255,0.7)]
               dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.3),inset_0_0_10px_rgba(255,255,255,0.05)]">
      <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center
                           bg-gradient-to-br from-pink-500 to-rose-600 dark:from-fuchsia-700 dark:to-purple-900
                           rounded-full shadow-lg hover:from-pink-600 hover:to-rose-700 dark:hover:from-fuchsia-800 dark:hover:to-purple-950
                           transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                           border-b-2 border-r-2 border-pink-700 dark:border-purple-800">
        <svg class="w-6 h-6 text-white stroke-current stroke-[2px] leading-3" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>

    <div class="flex justify-around mt-4 flex-wrap gap-2">
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-indigo-400 dark:bg-purple-700 text-white shadow-md
                     hover:bg-indigo-500 dark:hover:bg-purple-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-indigo-500 dark:border-purple-800">
        Category 1
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-emerald-400 dark:bg-teal-700 text-white shadow-md
                     hover:bg-emerald-500 dark:hover:bg-teal-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-emerald-500 dark:border-teal-800">
        Popular
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-amber-400 dark:bg-orange-700 text-white shadow-md
                     hover:bg-amber-500 dark:hover:bg-orange-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-amber-500 dark:border-orange-800">
        New
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-cyan-400 dark:bg-sky-700 text-white shadow-md
                     hover:bg-cyan-500 dark:hover:bg-sky-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-cyan-500 dark:border-sky-800">
        Trending
      </button>
    </div>

  </div>
</div>

<style>
/* Additional custom styles for skeuomorphism (optional, can be fully Tailwind with extended config) */
/* This is not strictly necessary but can enhance the depth if Tailwind's box-shadow is not enough */
.shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05), inset 0 0 10px rgba(255,255,255,0.7);
}
.dark .shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
}
</style>

Composant de flux d’activité

Un composant de flux d’activités conçu avec une esthétique skeuomorphe, utilisant une palette de couleurs triadique adaptée aux sites Web d’entreprise. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <!-- Component Container -->
  <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-850 rounded-xl shadow-2xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform perspective-1000 rotateX-3 rotateY-2 scale-98
              transition-all duration-300 ease-in-out hover:scale-100 hover:rotateX-0 hover:rotateY-0">

    <!-- Header -->
    <div class="px-6 py-4 bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900 text-white shadow-inner-lg
                border-b border-blue-700 dark:border-blue-900
                relative overflow-hidden z-10">
      <h2 class="text-3xl font-extrabold text-white tracking-tight leading-tight text-shadow-md relative z-20">
        Activity Feed
      </h2>
      <p class="mt-1 text-blue-100 dark:text-blue-200 text-sm italic relative z-20">Recent updates and notifications</p>

      <!-- Skeuomorphic light reflection -->
      <div class="absolute top-0 left-0 w-full h-full opacity-20 light-reflection z-10"></div>
    </div>

    <!-- Activity List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700 p-4 sm:p-6">

      <!-- Activity Item 1 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-2 ring-emerald-500 dark:ring-emerald-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-emerald-400 animate-pulse" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">John Doe</a> <span class="font-normal text-gray-600 dark:text-gray-400">completed task</span>
            <span class="text-emerald-600 dark:text-emerald-400 font-medium ml-1">"Project Alpha Design"</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-26T14:30">October 26, 2023 at 2:30 PM</time>
          </p>
          <div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <p>Uploaded final mockups and updated progress to 100%.</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 2 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-red-400" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Jane Smith</a> <span class="font-normal text-gray-600 dark:text-gray-400">commented on issue</span>
            <span class="text-red-600 dark:text-red-400 font-medium ml-1">#CRIT-451</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-26T10:15">October 26, 2023 at 10:15 AM</time>
          </p>
          <div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <p>"The reported bug seems to be related to the recent database migration. Investigating further..."</p>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs mt-1 block tracking-wide">View Issue</a>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <div class="flex items-center justify-center h-12 w-12 rounded-full ring-2 ring-orange-500 dark:ring-orange-400 bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 shadow-md user-avatar-placeholder">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
              </path>
            </svg>
          </div>
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-orange-400" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Marketing Team</a> <span class="font-normal text-gray-600 dark:text-gray-400">updated document</span>
            <span class="text-orange-600 dark:text-orange-400 font-medium ml-1">"Q4 Strategy Plan"</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-25T16:00">Yesterday at 4:00 PM</time>
          </p>
          <div class="mt-2 flex items-center space-x-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <img class="h-8 w-8 rounded-sm object-cover shadow-sm ring-1 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/50/50?random=1" alt="Document thumbnail">
            <div>
              <p class="text-sm text-gray-700 dark:text-gray-300">Updated Sections 2.1 and 3.5 with new market research data.</p>
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs">Download Document</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer / Action Area -->
    <div class="px-6 py-4 bg-gray-100 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700
                relative z-10 shadow-inner-top skeuo-footer">
      <button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm
                  text-white bg-blue-600 dark:bg-blue-700
                  hover:bg-blue-700 dark:hover:bg-blue-800
                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-850
                  skeuo-button transform active:scale-95 transition-all duration-150 ease-in-out">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Load More Activities
      </button>
      <p class="mt-3 text-xs text-center text-gray-500 dark:text-gray-400">Latest update 5 minutes ago</p>
    </div>
  </div>

  <!-- Custom Skeuomorphic Styles (via arbitrary values or pseudo-elements not directly in Tailwind classes) -->
  <style>
    .text-shadow-md {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.2);
    }
    .shadow-inner-lg {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    }
    .shadow-inner-top {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .dark .shadow-inner-lg {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .dark .shadow-inner-top {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.02);
    }

    /* Light reflection effect for header */
    .light-reflection {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    }

    /* Deeper dark mode colors for a more 'recessed' look */
    .dark\:bg-gray-850 {
        background-color: #1a202c; /* Deeper than typical gray-800 */
    }
    .dark\:bg-gray-825 {
        background-color: #28303e; /* Slightly lighter than gray-850 for inner elements */
    }
    .dark\:border-gray-750 {
        border-color: #3b4252; /* Slightly lighter border for inner elements */
    }

    /* Skeuomorphic button style */
    .skeuo-button {
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    .skeuo-button:hover {
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    .skeuo-button:active {
      box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 0px rgba(255, 255, 255, 0.1);
    }
    .dark .skeuo-button {
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.6), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
    }
    .dark .skeuo-button:hover {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
    }
    .dark .skeuo-button:active {
        box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.7), inset 0px -1px 0px rgba(255, 255, 255, 0.02);
    }

    /* Activity item interaction */
    .group:active {
       transform: translateY(1px);
       box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) /* Subtle inner shadow for 'pressed' effect */
    }
    .dark .group:active {
       box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) /* Darker inner shadow for 'pressed' effect */
    }

    /* General Skeuomorphic depth for buttons, avatars, etc. */
    .user-avatar, .user-avatar-placeholder, .message-bubble, .skeuo-footer {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), -2px -2px 5px rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255,255,255,0.4);
    }
    .skeuo-footer {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(255, 255, 255, 0.1);
    }
    .dark .user-avatar, .dark .user-avatar-placeholder, .dark .message-bubble, .dark .skeuo-footer {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), -2px -2px 5px rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255,255,255,0.05);
    }
    .dark .skeuo-footer {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(255, 255, 255, 0.02);
    }

    /* Pseudo 3D effect for the main container */
    @media (min-width: 768px) {
        .perspective-1000 {
            perspective: 1000px;
        }
        .rotateX-3 {
            transform: rotateX(3deg);
        }
        .rotateY-2 {
            transform: rotateY(2deg);
        }
        /* Ensuring transform applies to its own layer for smooth transition */
        transform: translateZ(0);
    }

    /* Ensure smooth transitions for dark mode color changes */
    html.dark * {
      transition-property: background-color, border-color, color, fill, stroke, box-shadow;
      transition-duration: 200ms;
    }
  </style>
</div>

Composant Infographie

Il s’agit d’un composant infographique complexe et minimaliste pour les portfolios, présentant des statistiques ou des réalisations clés. Il utilise une palette de couleurs complémentaire et comprend un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-6 sm:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Section 1: Introduction/Title -->
    <div class="lg:col-span-1 md:col-span-2 col-span-1 p-6 rounded-lg shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 text-white flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <div>
        <h2 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">My Portfolio Highlights</h2>
        <p class="text-lg opacity-90">A concise overview of key achievements and impact across various projects.</p>
      </div>
      <div class="mt-8 text-right">
        <svg class="h-12 w-12 opacity-80 inline-block" 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-4M8 21l4-4 4 4M3 4h18M4 4h16v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"></path>
        </svg>
      </div>
    </div>

    <!-- Stat Card 1 -->
    <div class="p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-teal-600 dark:text-teal-400 mb-2">500+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Projects Completed</p>
        <p class="text-gray-600 dark:text-gray-400">Successfully delivered a wide range of projects, from small-scale applications to enterprise-level solutions.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200">
          <svg class="w-4 h-4 mr-1" 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>
          Milestone
        </span>
      </div>
    </div>

    <!-- Stat Card 2 -->
    <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-emerald-600 dark:text-emerald-400 mb-2">95%+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Client Satisfaction</p>
        <p class="text-gray-600 dark:text-gray-400">Consistently achieved high client satisfaction ratings through effective communication and stellar results.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v-2m-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H6m5-11V3h8v8h-8V7m0 4h.01M17 11h.01M13 16h.01M17 16h.01M14 21h.01"></path></svg>
          Feedback
        </span>
      </div>
    </div>

    <!-- Stat Card 3 -->
    <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-orange-600 dark:text-orange-400 mb-2">10K+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Users Impacted</p>
        <p class="text-gray-600 dark:text-gray-400">Developed solutions that have positively impacted thousands of users globally across various platforms.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
          <svg class="w-4 h-4 mr-1" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0-16a3 3 0 00-3-3H7a3 3 0 00-3 3v2h12zm0 0v2h2V4z"></path></svg>
          Audience
        </span>
      </div>
    </div>

    <!-- Image Callout / Visual Element -->
    <div class="md:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col lg:flex-row items-center justify-center space-y-6 lg:space-y-0 lg:space-x-8 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl">
      <div class="flex-shrink-0 lg:w-1/3">
        <img src="https://picsum.photos/400/300?random=1" alt="Creative Process" class="rounded-lg object-cover h-48 w-full lg:h-auto lg:w-full shadow-md" loading="lazy">
      </div>
      <div class="lg:flex-grow text-center lg:text-left">
        <h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-3">Innovation at Core</h3>
        <p class="text-gray-600 dark:text-gray-400 text-lg">Embracing cutting-edge technologies and methodologies to deliver forward-thinking solutions.</p>
      </div>
    </div>

    <!-- Testimonial / Quote -->
    <div class="p-6 rounded-lg shadow-lg bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900 dark:to-teal-950 border border-emerald-200 dark:border-emerald-800 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl relative overflow-hidden">
      <blockquote class="relative z-10">
        <p class="text-xl italic font-medium text-gray-800 dark:text-gray-200 leading-relaxed mb-4">“Working with [Your Name] was a game-changer for our project. Their expertise and dedication are truly unmatched.”</p>
        <footer class="flex items-center">
          <img class="h-12 w-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" loading="lazy">
          <div>
            <cite class="block text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</cite>
            <span class="block text-gray-700 dark:text-gray-300 text-sm">CEO, Tech Solutions Inc.</span>
          </div>
        </footer>
      </blockquote>
      <div class="absolute -bottom-4 -right-4 text-emerald-300 dark:text-emerald-700 opacity-30 z-0">
        <svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 10C4.343 10 3 11.343 3 13s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3zm9 0c-1.657 0-3 1.343-3 3s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3z"></path>
        </svg>
      </div>
    </div>

    <!-- Skillset / Progress Bar (simplified) -->
    <div class="lg:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.015] hover:shadow-xl">
      <div>
        <h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">Core Competencies</h3>
        <div class="space-y-4">
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Frontend Development</span>
              <span class="text-gray-500 dark:text-gray-400">95%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-emerald-500 h-2 rounded-full" style="width: 95%;"></div>
            </div>
          </div>
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Backend Development</span>
              <span class="text-gray-500 dark:text-gray-400">85%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-teal-500 h-2 rounded-full" style="width: 85%;"></div>
            </div>
          </div>
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">UI/UX Design</span>
              <span class="text-gray-500 dark:text-gray-400">70%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Composant de carte thermique neumorphe

Un composant de carte thermique réactif et neumorphe avec une palette de couleurs triadique, conçu pour les sites Web d’entreprise et d’entreprise. Dispose d’ombres douces et d’une prise en charge du mode sombre, affichant visuellement l’intensité des données.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-850 p-6 sm:p-8 rounded-2xl shadow-xl dark:shadow-xl-dark transition-all duration-300 transform
              neumorphic-light dark:neumorphic-dark
              border border-gray-300 dark:border-gray-700">

    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Website Activity Heatmap</h2>
      <div class="relative inline-block text-left">
        <button type="button" class="inline-flex justify-center w-full rounded-xl border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gray-200 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 neumorphic-button-light dark:neumorphic-button-dark" id="menu-button" aria-expanded="true" aria-haspopup="true">
          Last 30 Days
          <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <div class="overflow-x-auto pb-4">
      <div class="grid grid-cols-7 gap-2 sm:gap-3 lg:gap-4 min-w-[500px]">
        <!-- Days Row -->
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Mon</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Tue</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Wed</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Thu</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Fri</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sat</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sun</div>

        <!-- Heatmap Grid Cells -->
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.1;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-95" style="--intensity: 0.95;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-100" style="--intensity: 1.0;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-85" style="--intensity: 0.85;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-5" style="--intensity: 0.05;"></div>

      </div>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
      <div class="flex items-center space-x-2 mb-4 sm:mb-0">
        <span class="font-medium">Intensity:</span>
        <div class="w-16 h-4 rounded-full bg-blue-300 dark:bg-blue-600 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-500 dark:bg-blue-500 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-700 dark:bg-blue-400 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <span>Low</span>
        <span>High</span>
      </div>
      <p class="text-center sm:text-right">Last updated: <span class="font-semibold">Yesterday, 3:45 PM</span></p>
    </div>

    <style>
      /* Base background color and custom properties for neumorphism */
      .bg-gray-850 {
        background-color: #27272a;
      }
      .neumorphic-light {
        box-shadow: 8px 8px 16px #acacac, -8px -8px 16px #ffffff;
      }
      .dark\:neumorphic-dark {
        box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
      }

      /* Neumorphic buttons */
      .neumorphic-button-light {
        box-shadow: 4px 4px 8px #bdbdbd, -4px -4px 8px #ffffff;
      }
      .neumorphic-button-light:hover {
        box-shadow: 2px 2px 4px #bdbdbd, -2px -2px 4px #ffffff;
        transform: translateY(1px);
      }
      .dark\:neumorphic-button-dark {
        box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
      }
      .dark\:neumorphic-button-dark:hover {
        box-shadow: 2px 2px 4px #1a1a1a, -2px -2px 4px #333333;
        transform: translateY(1px);
      }

      /* Heatmap cells */
      .neumorphic-cell-light {
        width: 40px;
        height: 40px;
        min-width: 32px;
        min-height: 32px;
        max-width: 60px;
        max-height: 60px; /* Constraints for responsiveness */
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        background-color: hsl(200, 70%, 50%); /* Blue - primary triadic color */
        box-shadow: inset 3px 3px 6px #acacac, inset -3px -3px 6px #ffffff;
        transition: all 0.2s ease-in-out;
      }
      @media (min-width: 640px) {
        .neumorphic-cell-light {
          width: 50px;
          height: 50px;
        }
      }
      @media (min-width: 768px) {
        .neumorphic-cell-light {
            width: 55px;
            height: 55px;
        }
      }
      @media (min-width: 1024px) {
        .neumorphic-cell-light {
            width: 60px;
            height: 60px;
        }
      }

      .dark\:neumorphic-cell-dark {
        background-color: hsl(200, 70%, 40%); /* Darker blue */
        box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #333333;
        border: 1px solid rgba(255,255,255,0.05);
      }

      /* Intensity-based color variation for cells (applied via --intensity custom property) */
      .neumorphic-cell-light[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(50% - var(--intensity, 0.5) * 10%)); /* Hue shift towards green/yellow, saturation/lightness adjust */
      }
      .dark\:neumorphic-cell-dark[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(40% + var(--intensity, 0.5) * 10%)); /* Darker base, shifts to lighter/more saturated with intensity */
      }

      /* Inner shadows for intensity legend */
      .neumorphic-inner-light {
        box-shadow: inset 2px 2px 4px #acacac, inset -2px -2px 4px #ffffff;
      }
      .dark\:neumorphic-inner-dark {
        box-shadow: inset 2px 2px 4px #1a1a1a, inset -2px -2px 4px #333333;
      }

      /* Triadic Color Scheme: Blue (Primary), Red-Orange, Green/Yellow for Accent/Highlight */
      /* Blue: hsl(200, 70%, 50%) -> Tailwind equivalent: blue-500, blue-300, blue-700 */
      /* Red-Orange: hsl(20, 70%, 50%) - could be used for danger/alert, not directly used in this heatmap intensity but good for overall palette */
      /* Green/Yellow: hsl(140, 70%, 50%) - subtle shift for higher intensity in light mode or as accent */
      /* The heatmap uses a subtle hue shift within the blue family for intensity, blending towards a greener blue for 'high' */
      /* The `bg-blue-300`, `bg-blue-500`, `bg-blue-700` in the legend illustrate intensity levels */
    </style>
  </div>
</div>

Fiche produit e-commerce Neumorphic

Une fiche produit e-commerce simple et réactive avec un style de conception neumorphique en niveaux de gris, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-2xl p-6 bg-gray-200 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 ease-in-out">
    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 group">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover rounded-xl transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-xl"></div>
      <span class="absolute top-3 left-3 px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-semibold rounded-full shadow-inner-light dark:shadow-inner-dark">
        New
      </span>
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Stylish Black Headphone</h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable ear cups.
    </p>

    <!-- Price and Rating -->
    <div class="flex items-center justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-100">$199.99</span>
      <div class="flex items-center space-x-1">
        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 fill-current" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.736 4.635 1.123 6.545z"/>
        </svg>
        <span class="text-sm text-gray-600 dark:text-gray-400">4.8 (120)</span>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 px-6 rounded-xl bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold transition-all duration-300 ease-in-out shadow-custom-button-light dark:shadow-custom-button-dark hover:shadow-custom-button-hover-light dark:hover:shadow-custom-button-hover-dark active:shadow-inner-light active:dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">
      Add to Cart
    </button>
  </div>
</div>

<style>
  /* Base Neumorphic Shadows for Light Mode */
  .shadow-custom-light {
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }
  .shadow-inner-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }
  .shadow-custom-button-light {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .shadow-custom-button-hover-light {
    box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-custom-dark {
    box-shadow: 8px 8px 16px #717171, -8px -8px 16px #414141;
  }
  .dark .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #414141;
  }
  .dark .shadow-custom-button-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #414141;
  }
  .dark .shadow-custom-button-hover-dark {
    box-shadow: 7px 7px 14px #717171, -7px -7px 14px #414141;
  }

  /* Custom Ring Offset for Dark Mode Focus */
  .dark\:focus\:ring-offset-gray-900:focus {
      box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-offset-color), var(--tw-ring-shadow);
      --tw-ring-offset-color: #1a202c;
  }
</style>

Composant d’intégration de média

Un composant d’intégration multimédia simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
    <div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
      <!-- Media Embed Area -->
      <div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
        <!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
        <img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
          Video Placeholder
        </div>
      </div>

      <!-- Content Details -->
      <div class="space-y-3">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
          Exploring the Serene Landscapes
        </h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
          Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
        </p>
        <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
          <span>By Jessica Lee</span>
          <span class="text-gray-500 dark:text-gray-600">•</span>
          <span>March 15, 2024</span>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 21 22 23 24 25 ... 242

Catégories

Tous les composants