Composante des composantes interactives
Composant de composants interactifs avec un design minimaliste/plat, une palette de couleurs de tons de terre et un niveau de complexité complexe pour un tableau de bord, mis en œuvre avec Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<!-- Header -->
<header class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
</div>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
</div>
</header>
<!-- Main Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<!-- Placeholder for chart/graph -->
<div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
Chart or Graph Placeholder
</div>
</div>
<!-- Card 2: Recent Orders -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
<ul>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1001</span>
<span class="text-green-600 dark:text-green-400">$150.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1002</span>
<span class="text-green-600 dark:text-green-400">$220.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1003</span>
<span class="text-green-600 dark:text-green-400">$95.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1004</span>
<span class="text-green-600 dark:text-green-400">$310.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1005</span>
<span class="text-green-600 dark:text-green-400">$180.00</span>
</li>
</ul>
</div>
<!-- Card 3: User Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
<!-- Placeholder for activity feed -->
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
<li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
<li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
</ul>
</div>
<!-- Card 4: Statistics -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
</div>
</div>
</div>
<!-- Card 5: Quick Actions -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
<div class="flex flex-col space-y-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
</div>
</div>
<!-- Card 6: Image Gallery (using picsum.photos) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
<img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
<img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
<img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
</div>
</div>
</div>
</div>Composants associés
Composante des composantes interactives
Un composant interactif pour les médias sociaux avec une palette de couleurs pastel, une complexité modérée, un design réactif et une prise en charge du mode sombre, construit avec Tailwind CSS et suivant les principes de conception matérielle. Il utilise des images factices de picsum.photos et des avatars de randomuser.me.
Composante des composantes interactives
Un composant interactif d’inspiration brutaliste pour un blog, avec des tons de terre à contraste élevé, un design réactif et la prise en charge du mode sombre.
Social_Dating_Interactive_Component
Un composant complexe et interactif de plate-forme sociale/de rencontre conçu avec un style d’entreprise propre et digne de confiance utilisant une palette de couleurs violet/violet. Comprend une mise en page réactive et la prise en charge du mode sombre.