Composant Graphiques
Un composant graphique complexe et réactif avec une palette de couleurs Neon/Electric, inspiré de la conception matérielle pour les outils CRM/Business. Comprend plusieurs éléments interactifs et une prise en charge complète du mode sombre.
HTML Code
<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>Composants associés
Composant Graphiques
Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.
Composant Graphiques
Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Graphiques
Un composant de graphiques complexe conçu pour les sites Web d’entreprise et d’entreprise, avec une conception 3D, une palette de couleurs complémentaire et une structure réactive avec prise en charge du mode sombre.