图表组件
一个复杂的响应式图表组件，具有 Neon/Electric 配色方案，灵感来自 Material Design for CRM/Business Tools。包括多个交互元素和完整的深色模式支持。
HTML 代码
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-teal-400 mb-2 sm:mb-0">Analytics Dashboard</h1>
<div class="flex space-x-2">
<button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
Today
</button>
<button class="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-700 text-white shadow-xl transform hover:scale-105 transition duration-300 ease-in-out dark:bg-teal-500 dark:hover:bg-teal-600">
Last 7 Days
</button>
<button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
Last 30 Days
</button>
</div>
</div>
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Sales Card -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-blue-500 dark:border-blue-600">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Sales</h3>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">$12,345</p>
<div class="flex items-center text-sm mt-3">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-green-500 font-medium">+5.2%</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-4 opacity-10">
<svg class="w-12 h-12 text-blue-500 dark:text-blue-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V9h2v8zm4 0h-2V7h2v10z"/>
</svg>
</div>
</div>
<!-- Customers Card -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-pink-500 dark:border-pink-600">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">New Customers</h3>
<p class="text-4xl font-extrabold text-pink-600 dark:text-pink-400">893</p>
<div class="flex items-center text-sm mt-3">
<svg class="w-4 h-4 mr-1 text-red-500 rotate-180" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-red-500 font-medium">-1.8%</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-4 opacity-10">
<svg class="w-12 h-12 text-pink-500 dark:text-pink-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.38 0 2.5 1.12 2.5 2.5S13.38 10.5 12 10.5 9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08s5.97 1.09 6 3.08c-1.29 1.94-3.5 3.22-6 3.22z"/>
</svg>
</div>
</div>
<!-- Revenue Card -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-lime-500 dark:border-lime-600">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Revenue</h3>
<p class="text-4xl font-extrabold text-lime-600 dark:text-lime-400">$34,567</p>
<div class="flex items-center text-sm mt-3">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-green-500 font-medium">+7.1%</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-4 opacity-10">
<svg class="w-12 h-12 text-lime-500 dark:text-lime-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H9.5L12 5l2.5 8H13v6z"/>
</svg>
</div>
</div>
<!-- Retention Card -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-purple-500 dark:border-purple-600">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Customer Retention</h3>
<p class="text-4xl font-extrabold text-purple-600 dark:text-purple-400">92%</p>
<div class="flex items-center text-sm mt-3">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-green-500 font-medium">+0.5%</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-4 opacity-10">
<svg class="w-12 h-12 text-purple-500 dark:text-purple-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.75 0-1.4-.24-1.92-.64C9.56 16.03 8.86 15 8.16 15c-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64C3.81 17 3 16.19 3 15.19 3 9.79 7.79 5 12 5s9 4.79 9 10.19c0 1.01-.81 1.81-1.81 1.81-.75 0-1.4-.24-1.92-.64-.52-.4-1.22-1.36-1.92-1.36-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64z"/>
</svg>
</div>
</div>
</div>
<!-- Main Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Sales Overview Chart -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sales Performance Overview</h2>
<div class="flex items-center justify-end space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
<label for="sales-period" class="sr-only">Select Period</label>
<select id="sales-period" class="bg-gray-100 dark:bg-gray-700 rounded-lg py-1 px-2 focus:ring-2 focus:ring-blue-500 dark:focus:ring-teal-400 outline-none">
<option>Daily</option>
<option selected>Weekly</option>
<option>Monthly</option>
<option>Yearly</option>
</select>
<button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"><span class="sr-only">Download</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414zM10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg></button>
</div>
<!-- Placeholder for a more complex chart (e.g., using an SVG or canvas library like Chart.js) -->
<div class="flex-grow flex items-center justify-center bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 h-64 lg:h-80">
<div class="w-full h-full relative">
<!-- Example simple SVG line chart -->
<svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
<!-- Grid Lines -->
<line x1="10" y1="50" x2="90" y2="50" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
<line x1="10" y1="40" x2="90" y2="40" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
<line x1="10" y1="30" x2="90" y2="30" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
<line x1="10" y1="20" x2="90" y2="20" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
<line x1="10" y1="10" x2="90" y2="10" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
<!-- Data Line 1 (Sales) -->
<polyline points="10,45 25,25 40,35 55,15 70,20 85,10 90,5" fill="none" stroke="#3b82f6" stroke-width="2.5" class="dark:stroke-blue-400"/>
<circle cx="10" cy="45" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="25" cy="25" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="40" cy="35" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="55" cy="15" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="70" cy="20" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="85" cy="10" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<circle cx="90" cy="5" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
<!-- Data Line 2 (Orders) -->
<polyline points="10,50 25,40 40,48 55,38 70,45 85,30 90,25" fill="none" stroke="#ec4899" stroke-width="2.5" class="dark:stroke-pink-400"/>
<circle cx="10" cy="50" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="25" cy="40" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="40" cy="48" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="55" cy="38" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="70" cy="45" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="85" cy="30" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<circle cx="90" cy="25" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
<!-- X-axis labels (simplified) -->
<text x="10" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Mon</text>
<text x="30" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Tue</text>
<text x="50" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Wed</text>
<text x="70" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Thu</text>
<text x="90" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Fri</text>
</svg>
<div class="absolute bottom-2 left-6 text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center mb-1">
<span class="inline-block w-3 h-3 rounded-full mr-2 bg-blue-500 dark:bg-blue-400"></span> Sales
</div>
<div class="flex items-center">
<span class="inline-block w-3 h-3 rounded-full mr-2 bg-pink-500 dark:bg-pink-400"></span> Orders
</div>
</div>
</div>
</div>
</div>
<!-- Top Products Chart/List -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Top Selling Products</h2>
<!-- Example Doughnut/Pie Chart Placeholder -->
<div class="flex-shrink-0 flex items-center justify-center p-4 h-64 lg:h-auto lg:flex-grow bg-gray-50 dark:bg-gray-900 rounded-lg mb-4">
<div class="w-48 h-48 rounded-full bg-gradient-to-br from-teal-400 via-blue-500 to-indigo-500 flex items-center justify-center text-white text-lg font-bold shadow-inner dark:from-teal-500 dark:via-blue-600 dark:to-indigo-600">
<span class="font-extrabold text-2xl">65%</span>
<span class="absolute text-xs bottom-12">Product A</span>
</div>
</div>
<ul class="space-y-3">
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span class="text-blue-500 dark:text-blue-400 font-semibold">Product A</span>
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">$5,100</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span class="text-pink-500 dark:text-pink-400 font-semibold">Product B</span>
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">$3,200</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span class="text-lime-500 dark:text-lime-400 font-semibold">Product C</span>
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-lime-100 dark:bg-lime-900 text-lime-800 dark:text-lime-200">$2,045</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span class="text-purple-500 dark:text-purple-400 font-semibold">Product D</span>
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">$1,560</span>
</li>
</ul>
</div>
<!-- Customer Segment Chart -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Customer Segments</h2>
<div class="flex-shrink-0 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg mb-4 h-64 lg:h-auto lg:flex-grow">
<div class="w-full h-full relative">
<!-- Example Simple Bar Chart -->
<div class="absolute bottom-0 left-0 w-full h-full flex items-end justify-around pb-2">
<div class="flex flex-col items-center">
<div class="bg-purple-500 dark:bg-purple-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 80%;"></div>
<p class="text-xs text-gray-600 dark:text-gray-300 mt-1">New</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-blue-500 dark:bg-blue-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 95%;"></div>
<p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Active</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-pink-500 dark:bg-pink-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 60%;"></div>
<p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Churned</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-lime-500 dark:bg-lime-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 45%;"></div>
<p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Loyal</p>
</div>
</div>
</div>
</div>
<ul class="space-y-3">
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span>New Leads</span>
<span class="font-bold text-lg text-purple-600 dark:text-purple-400">1,234</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span>Active Users</span>
<span class="font-bold text-lg text-blue-600 dark:text-blue-400">5,678</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span>Churn Rate</span>
<span class="font-bold text-lg text-pink-600 dark:text-pink-400">15%</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<span>Loyalty Score</span>
<span class="font-bold text-lg text-lime-600 dark:text-lime-400">8.9</span>
</li>
</ul>
</div>
<!-- Recent Activities Feed -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Activities</h2>
<div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
<ul class="space-y-4">
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Closed <span class="text-blue-500 dark:text-blue-400 font-semibold">#CRM-1234</span> deal for <span class="font-semibold">$5000</span></p>
<time class="text-xs text-gray-400 dark:text-gray-500">1 hour ago</time>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Updated customer notes for <span class="text-pink-500 dark:text-pink-400 font-semibold">Alice Johnson</span></p>
<time class="text-xs text-gray-400 dark:text-gray-500">3 hours ago</time>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">David Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Sent a follow-up email to <span class="text-lime-500 dark:text-lime-400 font-semibold">Bob Williams</span></p>
<time class="text-xs text-gray-400 dark:text-gray-500">Yesterday</time>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sarah Chen</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Created new task: <span class="text-purple-500 dark:text-purple-400 font-semibold">Onboard new client ABC Corp</span></p>
<time class="text-xs text-gray-400 dark:text-gray-500">2 days ago</time>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Michael Brown</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Logged call with <span class="text-blue-500 dark:text-blue-400 font-semibold">XYZ Solutions</span></p>
<time class="text-xs text-gray-400 dark:text-gray-500">3 days ago</time>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Completed task: <span class="text-pink-500 dark:text-pink-400 font-semibold">Prepare Q3 report</span></p>
<time class="text-xs text-gray-400 darker:text-gray-500">4 days ago</time>
</div>
</li>
</ul>
</div>
</div>
<!-- Upcoming Tasks/Meetings -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Upcoming Schedule</h2>
<div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
<ul class="space-y-4">
<li class="border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Meeting with Acme Corp</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Today, 2:00 PM - 3:00 PM</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Lead: John Doe</p>
</li>
<li class="border-l-4 border-lime-500 dark:border-lime-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Prepare Q4 Sales Forecast</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Due: Tomorrow, 5:00 PM</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Assigned to: Jane Smith</p>
</li>
<li class="border-l-4 border-purple-500 dark:border-purple-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Client Pitch Deck Review</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Fri, Nov 17, 10:00 AM</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Participants: Sarah Chen, David Lee</p>
</li>
<li class="border-l-4 border-pink-500 dark:border-pink-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Team Sync Meeting</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Mon, Nov 20, 9:00 AM</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Location: Conference Room 3</p>
</li>
</ul>
</div>
</div>
</div>
<!-- Contact Quick Access -->
<div class="mt-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 transform transition-transform duration-300 hover:scale-[1.005]">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Quick Customer Access</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Alice Johnson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Acme Corp</p>
</div>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-pink-400">Bob Williams</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Global Solutions</p>
</div>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-lime-600 dark:group-hover:text-lime-400">Carol Davis</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Innovate LLC</p>
</div>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Daniel Miller</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Quantum Tech</p>
</div>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Customer Avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Eve Taylor</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Future Sols</p>
</div>
</a>
</div>
</div>
</div>