사이버펑크 CRM 그리드
사이버펑크-미래주의적 네온 미학을 가진 CRM/비즈니스 도구를 위한 반응형 그리드 레이아웃 구성 요소로, 어두운 배경과 따뜻한 일몰 악센트 색상을 특징으로 합니다. 대화형 요소와 다크 모드 지원이 포함됩니다.
HTML 코드
<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>관련 구성 요소
사이버펑크 그리드 레이아웃 구성 요소
사이버펑크 미학을 가진 단순하고 반응이 빠른 그리드 레이아웃 구성 요소로, 이벤트 또는 컨퍼런스 웹 사이트에 적합합니다. 어두운 배경, 빛나는 네온 액센트, 트라이어딕 색 구성표가 특징입니다. 다크 모드 지원이 포함됩니다.