Composant de tableau de bord Luxury/Premium Marketplace
Un composant de tableau de bord complexe et réactif pour une place de marché multifournisseur avec un style de design luxueux/haut de gamme. Dispose d’une palette de couleurs bleue d’entreprise professionnelle, d’une typographie sophistiquée et d’une prise en charge du mode sombre. Comprend des sections pour une vue d’ensemble, les ventes récentes, les meilleurs produits et des statistiques rapides.
HTML Code
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
<!-- Header -->
<header class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 lg:mb-8">
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 sm:mb-0">Vendor Dashboard</h1>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm w-40 sm:w-64">
<svg class="w-5 h-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<button class="p-2 rounded-full bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
<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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
</button>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
</div>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
<!-- Quick Stats Cards (Col Span 4 on Lg, 2 on Md) -->
<div class="lg:col-span-4 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Stat Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Total Sales</p>
<h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">$12,450.75</h3>
</div>
<svg class="w-10 h-10 text-blue-500 dark:text-blue-400 opacity-70" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</div>
<!-- Stat Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Orders Today</p>
<h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">58</h3>
</div>
<svg class="w-10 h-10 text-green-500 dark:text-green-400 opacity-70" 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>
</div>
<!-- Stat Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">New Customers</p>
<h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">12</h3>
</div>
<svg class="w-10 h-10 text-purple-500 dark:text-purple-400 opacity-70" 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-2a3 3 0 015.356-1.857m7.5 1.857H10M11 12a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
</div>
<!-- Stat Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Product Views</p>
<h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">2,104</h3>
</div>
<svg class="w-10 h-10 text-orange-500 dark:text-orange-400 opacity-70" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
</div>
<!-- Recent Sales Chart/Table -->
<section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Recent Sales</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 text-sm">
<tr>
<td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45678</td>
<td class="px-4 py-4 whitespace-nowrap">Luxury Watch</td>
<td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$899.00</td>
<td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45677</td>
<td class="px-4 py-4 whitespace-nowrap">Designer Handbag</td>
<td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$549.50</td>
<td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45676</td>
<td class="px-4 py-4 whitespace-nowrap">Premium Coffee Maker</td>
<td class="px-4 py-4 whitespace-nowrap text-yellow-600 dark:text-yellow-400 font-bold">$220.00</td>
<td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span></td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45675</td>
<td class="px-4 py-4 whitespace-nowrap">Acoustic Guitar</td>
<td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$780.00</td>
<td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45674</td>
<td class="px-4 py-4 whitespace-nowrap">Smart Home Hub</td>
<td class="px-4 py-4 whitespace-nowrap text-red-600 dark:text-red-400 font-bold">$150.00</td>
<td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">Cancelled</span></td>
</tr>
</tbody>
</table>
</div>
<button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">View All Sales</a></button>
</section>
<!-- Top Selling Products -->
<section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Top Selling Products</h2>
<div class="space-y-4">
<!-- Product Item 1 -->
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=1" alt="Watch" class="w-20 h-20 rounded-lg object-cover shadow-sm">
<div class="flex-1">
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Luxury Swiss Watch</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>150</span> units</p>
<p class="text-blue-700 dark:text-blue-300 font-bold">$899.00</p>
</div>
<button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Product Item 2 -->
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=2" alt="Handbag" class="w-20 h-20 rounded-lg object-cover shadow-sm">
<div class="flex-1">
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Italian Leather Handbag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>120</span> units</p>
<p class="text-blue-700 dark:text-blue-300 font-bold">$549.50</p>
</div>
<button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Product Item 3 -->
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=3" alt="Camera" class="w-20 h-20 rounded-lg object-cover shadow-sm">
<div class="flex-1">
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Professional DSLR Camera</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>90</span> units</p>
<p class="text-blue-700 dark:text-blue-300 font-bold">$1,200.00</p>
</div>
<button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
</div>
</div>
<button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Manage Products</a></button>
</section>
<!-- Customer Reviews / Feedback -->
<section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Customer Feedback</h2>
<div class="space-y-5">
<!-- Review 1 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
<div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">Emily R.</p>
<div class="flex items-center text-yellow-500 text-sm mb-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Absolutely love the quality of products! Fast shipping and excellent customer service. Highly recommend this marketplace."</p>
</div>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Review 2 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
<div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">David S.</p>
<div class="flex items-center text-yellow-500 text-sm mb-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Great platform for unique items. Had a slight issue with delivery but customer support resolved it quickly and professionally."</p>
</div>
</div>
</div>
<button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Read All Reviews</a></button>
</section>
<!-- To-Do List -->
<section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">To-Do List</h2>
<div class="space-y-4">
<!-- Task 1 -->
<label class="flex items-center space-x-3 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
<span class="text-gray-800 dark:text-gray-200 text-base">Respond to customer inquiries</span>
</label>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Task 2 -->
<label class="flex items-center space-x-3 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500" checked>
<span class="text-gray-500 dark:text-gray-400 text-base line-through">Update product listings photos</span>
</label>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Task 3 -->
<label class="flex items-center space-x-3 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
<span class="text-gray-800 dark:text-gray-200 text-base">Prepare monthly sales report</span>
</label>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Task 4 -->
<label class="flex items-center space-x-3 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
<span class="text-gray-800 dark:text-gray-200 text-base">Plan next marketing campaign</span>
</label>
</div>
<button class="mt-6 w-full py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200 font-semibold"><a href="#">Add New Task</a></button>
</section>
</div>
</div>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.
Dashboard_Component
Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.