Grille CRM Cyberpunk
Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-950 text-orange-200 p-4 sm:p-6 lg:p-8 font-mono dark:bg-gray-950 dark:text-orange-200">
<!-- Header/Title Section -->
<div class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-orange-400 mb-2 drop-shadow-xl shadow-orange-500/50 dark:text-orange-400">
<span class="animate-pulse-slow">CYBERNETIC</span> DECK // <span class="text-orange-500">CRM_OPS</span>
</h1>
<p class="text-lg sm:text-xl text-yellow-300 dark:text-yellow-300">Enhanced Customer Interface Protocol</p>
</div>
<!-- Main Grid Container -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min">
<!-- Customer Overview Card -->
<div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
<div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
CLIENT PROFILES
</h2>
<p class="text-sm text-yellow-200 mb-4 z-10 relative">Active customer profiles and recent interactions.</p>
<ul class="space-y-3 z-10 relative">
<li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-orange-300">NeoTech Dynamics</p>
<p class="text-xs text-yellow-400">Last login: 2 days ago</p>
</div>
<span class="text-xs text-green-400">+1.2%</span>
</li>
<li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-orange-300">Synaptic Nexus Corp</p>
<p class="text-xs text-yellow-400">New lead: 5 hours ago</p>
</div>
<span class="text-xs text-yellow-400">New</span>
</li>
<li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-orange-300">Quantum Robotics</p>
<p class="text-xs text-yellow-400">Upcoming meeting</p>
</div>
<span class="text-xs text-red-400">-0.5%</span>
</li>
</ul>
<button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View All Customers</button>
</div>
<!-- Sales Performance Card -->
<div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
<div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
SALES OVERVIEW
</h2>
<div class="text-center mb-4 z-10 relative">
<p class="text-4xl font-bold text-orange-300 mb-1"><span class="text-yellow-400">$</span>128,450</p>
<p class="text-sm text-yellow-200">Revenue this cycle</p>
</div>
<div class="relative w-full h-32 bg-gray-800/70 rounded-md p-2 mb-4 z-10 relative">
<!-- Placeholder for a more complex chart (e.g., SVG or image) -->
<img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="w-full h-full object-cover rounded-md opacity-70 group-hover:opacity-90 transition-opacity duration-300" />
<div class="absolute inset-0 flex items-center justify-center text-orange-400 font-bold text-sm leading-none">[ANALYTICS FEED]</div>
</div>
<div class="flex justify-between text-sm z-10 relative">
<div>
<p class="text-yellow-400">Avg Deal:</p>
<p class="text-orange-300">$2,560</p>
</div>
<div>
<p class="text-yellow-400">Conversion:</p>
<p class="text-orange-300">18.3%</p>
</div>
<div>
<p class="text-yellow-400">Growth:</p>
<p class="text-green-400">+4.7%</p>
</div>
</div>
<button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Deep Dive Analytics</button>
</div>
<!-- Interactive Task Management Card - Span 2 columns on larger screens -->
<div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden lg:col-span-2 group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
<div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
TASK_FLOW CONTROL
</h2>
<div class="flex flex-col sm:flex-row gap-4 mb-4 z-10 relative">
<input type="text" placeholder="New task description..." class="flex-1 bg-gray-800 border border-orange-700 px-4 py-2 rounded-md text-orange-200 placeholder-yellow-300/50 focus:outline-none focus:ring-2 focus:ring-orange-500" />
<button class="bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 px-5 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200">Add Task</button>
</div>
<ul class="space-y-3 z-10 relative">
<li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer" checked>
<div class="ml-4 flex-1">
<p class="text-orange-300 font-semibold line-through">Finalize Q3 Synergy Report</p>
<p class="text-xs text-yellow-400">Due: 2024-10-26</p>
</div>
<span class="text-xs text-green-400">Completed</span>
</li>
<li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
<div class="ml-4 flex-1">
<p class="text-orange-300 font-semibold">Client Call: Project Alpha Status</p>
<p class="text-xs text-yellow-400">Due: 2024-10-28 <span class="text-red-400">[PRIORITY]</span></p>
</div>
<span class="text-xs text-yellow-400">Pending</span>
</li>
<li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
<div class="ml-4 flex-1">
<p class="text-orange-300 font-semibold">Review CRM Logs for Anomaly 7</p>
<p class="text-xs text-yellow-400">Due: 2024-10-29</p>
</div>
<span class="text-xs text-yellow-400">Pending</span>
</li>
</ul>
<button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Manage All Tasks</button>
</div>
<!-- Quick Stats Card -->
<div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
<div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.883 11.232C17.265 10.485 16.29 10 15 10c-1.396 0-2.584.279-3.522.687L9 11.232V14.5A.5.5 0 018.5 15h-2a.5.5 0 01-.5-.5V8.216A.5.5 0 016.146 7.785l.775-.775C7.309 6.275 8.04 6 9 6c.71 0 1.34.162 1.895.424L12 7.375V11a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-4.883c.969-.344 2.148-.595 3.52-.595 1.765 0 3.23.513 4.143 1.258l-.634.789c-.5-.402-1.3-.647-2.274-.647-1.127 0-2.12.39-2.828.98L13 13h-2v3a1 1 0 001 1h4a1 1 0 001-1v-5.285c.618-.466 1.07-1.077 1.383-1.815z"></path></svg>
SYSTEM STATUS
</h2>
<div class="text-sm space-y-3 z-10 relative">
<div class="flex justify-between items-center">
<span class="text-yellow-400">Client Connections:</span>
<span class="text-orange-300 font-bold">482_online</span>
</div>
<div class="flex justify-between items-center">
<span class="text-yellow-400">Data Traffic:</span>
<span class="text-orange-300 font-bold">~1.2 TB/hr</span>
</div>
<div class="flex justify-between items-center">
<span class="text-yellow-400">Server Latency:</span>
<span class="text-green-400 font-bold"><50ms</span>
</div>
<div class="flex justify-between items-center">
<span class="text-yellow-400">Active Sessions:</span>
<span class="text-orange-300 font-bold">127</span>
</div>
</div>
<button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Run Diagnostics</button>
</div>
<!-- Recent Activities Feed Card -->
<div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
<div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
ACTIVITY LOG
</h2>
<ul class="space-y-3 text-sm z-10 relative">
<li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-green-500"></div>
<div>
<p class="text-orange-300"><span class="text-yellow-400 font-semibold">User 'JADE_OPS'</span> updated lead status for <span class="text-orange-400">'Project Chimera'</span>.</p>
<p class="text-xs text-yellow-400">15 minutes ago</p>
</div>
</li>
<li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-blue-500"></div>
<div>
<p class="text-orange-300"><span class="text-yellow-400 font-semibold">System_Bot_RX</span> initiated data backup protocol.</p>
<p class="text-xs text-yellow-400">1 hour ago</p>
</div>
</li>
<li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-red-500"></div>
<div>
<p class="text-orange-300"><span class="text-yellow-400 font-semibold">Client 'NeuralNet Inc.'</span> payment processing FAILED. Alert issued.</p>
<p class="text-xs text-yellow-400">3 hours ago</p>
</div>
</li>
</ul>
<button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View Full Log</button>
</div>
</div>
<!-- Footer/System Info -->
<div class="mt-8 text-center text-yellow-500/70 text-sm">
<p>© 2077 CyberCorp Solutions. All rights reserved. // <span class="text-orange-600">SECURE_CHANNEL_ACTIVE</span></p>
</div>
<!-- Tailwind JIT compatibility (not part of component, but useful for dev) -->
<style>
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.animate-pulse-slow {
animation: pulse-slow 3s infinite ease-in-out;
}
</style>
</div>Composants associés
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.
Industrial_Juwel_Tones_Grid_Layout_Component
Un composant de mise en page de grille réactive pour le conseil/les services, présentant une esthétique industrielle avec des couleurs de bijou. Comprend la prise en charge du mode sombre et des éléments interactifs.
Disposition brutaliste de la grille
Un composant de mise en page de grille réactif doté d’un style de conception brutaliste avec un contraste élevé, des mises en page inhabituelles et une prise en charge du thème sombre.