Componente di incorporamento multimediale
Un componente di incorporamento multimediale retrò/vintage progettato con nostalgia degli anni '80 e '90. È dotato di uno stile reattivo e del supporto per la modalità oscura con Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="relative">
<img class="w-full" src="https://picsum.photos/600/400?random=1" alt="Media Thumbnail" />
<div class="absolute top-0 left-0 right-0 bottom-0 bg-black opacity-25"></div>
<div class="absolute top-2 right-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white rounded-full p-2 shadow flex items-center">
<img class="rounded-full w-8 h-8 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Vintage Media Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description of the media embed component. It encompasses a retro aesthetic reminiscent of the 80s and 90s, adorned with bright colors and distinctive patterns.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-400">Posted on 01 Jan 1990</span>
<a href="#" class="bg-pink-500 text-white px-3 py-1 rounded-full hover:bg-pink-600 transition">Watch Now</a>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #2d3748;
}
.dark\:text-white {
color: #fff;
}
.dark\:text-gray-300 {
color: #e2e8f0;
}
.dark\:text-gray-400 {
color: #cbd5e0;
}
.dark\:bg-gray-900 {
background-color: #1a202c;
}
.dark\:border-gray-600 {
border-color: #4a5568;
}
}
</style>Componenti correlati
Brutalist_Retro_Media_Embed_E-commercio
Un componente multimediale embed complesso, reattivo e in stile brutalista per l'e-commerce, caratterizzato da contrasto elevato, una tavolozza di colori retrò, supporto per la modalità oscura e molteplici elementi interattivi per le vetrine dei prodotti.
Componente di incorporamento dei media di neumorfismo
Un componente di incorporamento multimediale neumorfico per siti Web aziendali, con design reattivo e supporto per temi scuri utilizzando colori complementari.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo progettato con lo scheumorfismo, utilizzando una combinazione di colori monocromatica. Include un lettore video, una sezione di trascrizione e pulsanti di condivisione social. Il design supporta la modalità oscura ed è costruito con Tailwind CSS.