Componente Componenti multimediali
Un componente multimediale progettato con lo stile scheumorfismo utilizzando Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark theme support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1A202C;
}
}
</style>Componenti correlati
Componente Media Components con Glassmorphism
Componente con design Glassmorphism, supporto per la modalità reattiva e oscura
Cyberpunk_Dating_Media_Component
Un componente multimediale reattivo per piattaforme di appuntamenti/social con un'estetica cyberpunk, con colori vivaci di caramelle, sfondi scuri ed elementi interattivi. Supporta la modalità oscura.
Componente del supporto Glassmorphism per la produzione
Un componente multimediale glassmorphism reattivo progettato per applicazioni manifatturiere/industriali, con elementi traslucidi smerigliati, colori neutri freddi e supporto per la modalità scura.