Search Components

All Components

Browse all available Tailwind CSS components

Heat Maps Component

A minimalist and flat design heat map component for dashboards, featuring a complementary color scheme, responsive layout, and dark mode support. Displays activity levels over time.

Open Preview

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

A complex, responsive feedback and testimonial section for business/corporate websites, designed with a dark mode UI and pastel color scheme. Includes multiple interactive elements like testimonials, a contact form, and a rating display.

Open Preview

                <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

A complex, responsive, skeuomorphic dashboard component with vibrant colors, designed for business/corporate use, featuring data visualizations and interactive elements with dark mode support.

Open Preview

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

Buttons Component

A collection of minimalist and flat design buttons for various actions, using a complementary color scheme. Fully responsive with dark mode support.

Open Preview

                <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

A moderate complexity search box component with a skeuomorphic design, vibrant color scheme, and full responsiveness with dark mode support, suitable for blog/content sites.

Open Preview

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

Activity Feed Component

An activity feed component designed with a skeuomorphic aesthetic, using a triadic color scheme suitable for business/corporate websites. It is responsive and supports dark mode.

Open Preview

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

Infographics Component

A complex, minimalist infographic component for portfolios, featuring key statistics or achievements. It uses a complementary color scheme and includes responsive design with dark mode support.

Open Preview

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

Neumorphic Heat Map Component

A responsive, neumorphic heat map component with a triadic color scheme, designed for business and corporate websites. Features soft shadows and dark mode support, displaying data intensity visually.

Open Preview

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

Neumorphic E-commerce Product Card

A simple, responsive e-commerce product card with a neumorphic design style in grayscale, featuring dark mode support.

Open Preview

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

Media Embed Component

A simple, responsive media embed component with a glassmorphism design, pastel color scheme, and dark mode support, suitable for blog and content consumption.

Open Preview

                <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 ... 114 115 116 117 118 ... 335

Search Components

Categories

All Components

Heat Maps Component

Feedback Components Component

Skeuomorphic_Vibrant_Business_Dashboard

Buttons Component

Skeuomorphic_Vibrant_Search_Box_Component

Activity Feed Component

Infographics Component

Neumorphic Heat Map Component

Neumorphic E-commerce Product Card

Media Embed Component