Watercolor_Artistic_Dashboard_Grid_Layout

<div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 p-4 sm:p-6 font-sans">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-8 sm:mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Artistic Dashboard</span>
      <span class="block text-2xl sm:text-3xl font-light text-purple-600 dark:text-purple-400 mt-2">Creative Insights</span>
    </h1>

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

      <!-- Card 1: Sales Overview -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-2 relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-purple-300/50 to-indigo-200/50 dark:from-fuchsia-950/20 dark:via-purple-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Global Sales Performance</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Interactive sales data across all regions.</p>
          <div class="flex-grow min-h-[150px] sm:min-h-[200px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm italic overflow-hidden shadow-inner">
            <img src="https://picsum.photos/600/300?random=1" alt="Sales Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-4xl font-extrabold text-purple-900 dark:text-purple-200">$1.2M</span>
            <span class="text-green-600 dark:text-green-400 font-semibold text-lg flex items-center">
              <svg class="w-6 h-6 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3.707a1 1 0 011.414 0l5.293 5.293a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              +12% <span class="hidden sm:inline-block ml-1">this month</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 2: User Engagement -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-75"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">User Engagement</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Metrics for active users and session times.</p>
          <div class="flex-grow min-h-[120px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm overflow-hidden shadow-inner">
            <img src="https://picsum.photos/300/200?random=2" alt="User Engagement Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-3xl font-extrabold text-purple-900 dark:text-purple-200">50K</span>
            <span class="text-orange-500 dark:text-orange-400 font-semibold text-md flex items-center">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              -3% <span class="hidden sm:inline-block ml-1">last week</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 3: Project Status -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-150"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Project Status</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Overview of current project milestones.</p>
          <ul class="flex-grow space-y-3">
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-green-400 dark:bg-green-600 w-3 h-3 rounded-full mr-3 border border-green-500 dark:border-green-700"></span>
              <span>Feature X Development <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">80%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-yellow-400 dark:bg-yellow-600 w-3 h-3 rounded-full mr-3 border border-yellow-500 dark:border-yellow-700"></span>
              <span>Marketing Campaign Launch <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">45%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-blue-400 dark:bg-blue-600 w-3 h-3 rounded-full mr-3 border border-blue-500 dark:border-blue-700"></span>
              <span>New User Onboarding Flow <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">95%</strong></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-3 px-4 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Projects
          </button>
        </div>
      </div>

      <!-- Card 4: Recent Activities -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-indigo-200/50 to-pink-200/50 dark:from-fuchsia-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-225"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Recent Activities</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Latest updates and notifications.</p>
          <div class="flex-grow space-y-4">
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">John D. <span class="font-normal text-purple-600 dark:text-purple-400">completed task UI Revamp</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">2 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Jane S. <span class="font-normal text-purple-600 dark:text-purple-400">added 3 new reports</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">5 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Mike R. <span class="font-normal text-purple-600 dark:text-purple-400">commented on 'Analytics Bug'</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">Yesterday</p>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-3 px-4 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 font-semibold rounded-xl hover:bg-purple-300 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Activities
          </button>
        </div>
      </div>

      <!-- Card 5: Performance Metrics (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-300"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Load Speed</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Current dashboard load time.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-blue-500 dark:text-blue-400 drop-shadow-md">1.8s</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Compared to 2.1s last month</p>
        </div>
      </div>

      <!-- Card 6: Customer Feedback (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-375"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Feedback Score</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Average customer satisfaction.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-yellow-500 dark:text-yellow-400 drop-shadow-md">4.7</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Out of 5 stars</p>
        </div>
      </div>

      <!-- Card 7: Resource Utilization (Large) -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-full relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 via-indigo-200/50 to-pink-200/50 dark:from-purple-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-450"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Server Resource Utilization</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Live monitoring of CPU, Memory, and Disk usage.</p>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 flex-grow">
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">CPU Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-blue-400 dark:bg-blue-500 h-4 rounded-full" style="width: 65%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">65% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Memory Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-green-400 dark:bg-green-500 h-4 rounded-full" style="width: 40%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">40% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Disk Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-red-400 dark:bg-red-500 h-4 rounded-full" style="width: 88%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">88% Used</p>
            </div>
          </div>
          <button class="mt-8 py-3 px-6 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5 self-center">
            Detailed Analytics
          </button>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-background {
      0% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 0.9; transform: scale(1.01); }
      100% { opacity: 0.8; transform: scale(1); }
    }

    .animate-pulse-background {
      animation: pulse-background 8s ease-in-out infinite alternate;
    }

    .delay-75 { animation-delay: 0.75s; }
    .delay-150 { animation-delay: 1.5s; }
    .delay-225 { animation-delay: 2.25s; }
    .delay-300 { animation-delay: 3s; }
    .delay-375 { animation-delay: 3.75s; }
    .delay-450 { animation-delay: 4.5s; }
  </style>
</div>