Media Components Component

<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>