Componente Componenti multimediali
Un componente multimediale progettato in stile brutalismo, che mostra un layout audace con contrasto elevato, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
<div class="flex flex-col md:flex-row items-start md:items-center gap-6">
<img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
<p class="text-gray-700 dark:text-gray-400 mb-4">
This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
</p>
<span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
</span>
</div>
</div>
<div class="mt-4 flex gap-4">
<button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
<button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800, .bg-gray-700 {
background-color: #4a5568;
}
.text-gray-200 {
color: #edf2f7;
}
.text-gray-400 {
color: #a0aec0;
}
}
</style>
Componenti correlati
Industrial_Marketplace_Media_Component
Un semplice componente multimediale in stile industriale per un marketplace, con un'immagine, un titolo e un prezzo, con particolare attenzione alle materie prime e all'estetica utilitaristica. Utilizza colori autunnali e supporta la modalità scura.
Brutalism_Job_Media_Card
Un componente multimediale complesso, in stile brutalista, per una bacheca di lavoro, caratterizzato da un contrasto elevato, una tipografia audace e una combinazione di colori viola/viola. Reattivo con supporto per la modalità oscura.
Componenti multimediali
Un componente in stile neumorfismo per la visualizzazione multimediale con design reattivo e supporto per temi scuri.