Componente Componenti multimediali
Un componente Media Components reattivo con un design brutalista, colori vivaci e layout complesso per una dashboard, con supporto per temi scuri e senza JavaScript. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Codice 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>Componenti correlati
Componenti multimediali Componente 2
Un componente multimediale in stile retrò/vintage caratterizzato da un design nostalgico ispirato all'estetica degli anni '80/'90, con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Brutalismo Prenotazione Media Componente
Un componente multimediale semplice e in stile brutalista per i sistemi di prenotazione, caratterizzato da un contrasto elevato e da una combinazione di colori complementari, completamente reattivo con supporto per la modalità scura.
Componente multimediale Glassmorphic
Un componente della scheda multimediale reattivo con un design glassmorphism (effetto vetro smerigliato) costruito con Tailwind CSS. Presenta un segnaposto per immagini (da picsum.photos) con un'icona di riproduzione al passaggio del mouse, contenuti testuali, una sezione autore con un avatar (da randomuser.me) e pulsanti di azione. Il componente supporta la modalità oscura utilizzando le varianti "dark:" di Tailwind CSS ed è reattivo su varie dimensioni dello schermo. Non è richiesto alcun JavaScript. Per un effetto visivo ottimale, posizionare questo componente su uno sfondo a contrasto. La funzionalità della modalità oscura presuppone una configurazione CSS Tailwind appropriata (ad esempio, 'darkMode: "class"' nel tuo tailwind.config.js).