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
Componente di incorporamento multimediale
Un componente multimediale incorporato minimalista progettato per dashboard con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Componente di incorporamento di contenuti multimediali retrò
Un componente Media Embed reattivo con un design "Retro/Vintage", ispirato all'estetica degli anni '80/'90 come i vecchi monitor CRT e i lettori VCR. Utilizza una combinazione di colori complementari di verde acqua e arancione su una base grigio ardesia, adatta per siti Web "Business/Corporate". Il componente presenta una complessità moderata con effetti di passaggio del mouse sul pulsante di riproduzione e sulla miniatura multimediale, un'animazione di luce REC finta ed elementi di controllo decorativi non funzionali. Include il supporto per il tema scuro utilizzando il prefisso "dark:" di Tailwind. L'area multimediale è progettata per un rapporto di aspetto 16:9 (richiede il plug-in Tailwind aspect-ratio o un fallback CSS come il trucco padding-bottom). Viene utilizzata l'immagine segnaposto da picsum.photos.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo progettato con uno stile di neumorfismo, con colori vivaci e un'interfaccia interattiva adatta per applicazioni dashboard.