미디어 컴포넌트 컴포넌트
브루탈리즘 디자인, 생생한 색상, 대시보드의 복잡한 레이아웃을 갖춘 반응형 미디어 구성 요소 구성 요소로, 어두운 테마를 지원하고 JavaScript를 사용하지 않습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Media Card 1 -->
<div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-x-3 hover:skew-x-0 transition-transform duration-300">
<img src="https://picsum.photos/400/250?random=1" alt="Media 1" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Data Stream Alpha</h3>
<p class="text-black dark:text-white text-sm mb-4">Real-time analytics and visualization of sensor data from industrial machinery.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-yellow-300 dark:bg-yellow-500 px-3 py-1 border-2 border-black dark:border-white">Live</span>
<a href="#" class="text-black dark:text-white bg-red-500 dark:bg-red-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-red-600 dark:hover:bg-red-800 transition-colors duration-200">View Dashboard</a>
</div>
</div>
<!-- Media Card 2 -->
<div class="bg-green-400 dark:bg-green-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-y-3 hover:skew-y-0 transition-transform duration-300">
<img src="https://picsum.photos/400/250?random=2" alt="Media 2" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">System Health Monitor</h3>
<p class="text-black dark:text-white text-sm mb-4">Overview of server health, network latency, and application performance metrics.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-blue-300 dark:bg-blue-500 px-3 py-1 border-2 border-black dark:border-white">Warning</span>
<a href="#" class="text-black dark:text-white bg-purple-500 dark:bg-purple-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-200">Inspect Logs</a>
</div>
</div>
<!-- Media Card 3 -->
<div class="bg-red-400 dark:bg-red-700 p-6 shadow-2xl border-4 border-black dark:border-white transform rotate-3 hover:rotate-0 transition-transform duration-300">
<img src="https://picsum.photos/400/250?random=3" alt="Media 3" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">User Activity Log</h3>
<p class="text-black dark:text-white text-sm mb-4">Detailed records of user interactions and system events across the platform.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Critical</span>
<a href="#" class="text-black dark:text-white bg-green-500 dark:bg-green-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-green-600 dark:hover:bg-green-800 transition-colors duration-200">Review Incidents</a>
</div>
</div>
<!-- Media Card 4 with Avatar -->
<div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-16 h-16 rounded-full object-cover border-2 border-black dark:border-white mr-4">
<div>
<h3 class="text-2xl font-bold text-black dark:text-white uppercase">Team Collaboration</h3>
<p class="text-black dark:text-white text-sm">Updates from the development team.</p>
</div>
</div>
<p class="text-black dark:text-white text-sm mb-4">Latest sprint review and upcoming feature discussions. Track progress.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-orange-300 dark:bg-orange-500 px-3 py-1 border-2 border-black dark:border-white">Update</span>
<a href="#" class="text-black dark:text-white bg-yellow-500 dark:bg-yellow-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-800 transition-colors duration-200">Join Meeting</a>
</div>
</div>
<!-- Media Card 5 - Chart Placeholder -->
<div class="bg-orange-400 dark:bg-orange-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-y-6 hover:skew-y-0 transition-transform duration-300">
<div class="w-full h-48 bg-gray-300 dark:bg-gray-600 flex items-center justify-center mb-4 border-2 border-black dark:border-white">
<p class="text-black dark:text-white text-lg font-bold">Chart Placeholder</p>
</div>
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Traffic Overview</h3>
<p class="text-black dark:text-white text-sm mb-4">Visual representation of website traffic and user engagement.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-purple-300 dark:bg-purple-500 px-3 py-1 border-2 border-black dark:border-white">Metrics</span>
<a href="#" class="text-black dark:text-white bg-blue-500 dark:bg-blue-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-blue-600 dark:hover:bg-blue-800 transition-colors duration-200">Full Report</a>
</div>
</div>
<!-- Media Card 6 - Text Only -->
<div class="bg-teal-400 dark:bg-teal-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -rotate-6 hover:rotate-0 transition-transform duration-300">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Security Alerts</h3>
<p class="text-black dark:text-white text-sm mb-4">Immediate notifications on potential security breaches and vulnerabilities.</p>
<ul class="list-disc list-inside mb-4 text-black dark:text-white text-sm">
<li>Intrusion detected in server 1</li>
<li>Unauthorized access attempt blocked</li>
<li>Malware scan initiated</li>
</ul>
<div class="flex justify-between items-center">
<span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Urgent</span>
<a href="#" class="text-black dark:text-white bg-orange-500 dark:bg-orange-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200">Resolve</a>
</div>
</div>
</div>
</div>