Composant d’intégration de média
Un composant d’intégration multimédia rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.
HTML Code
<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>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.
Composant d’intégration de média
Un composant multimédia d’intégration minimaliste conçu pour les tableaux de bord avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge du thème sombre pour les sites de blog/contenu, stylisé selon les principes de conception matérielle, une palette de couleurs triadique et une complexité modérée. Comprend un espace réservé vidéo intégré et des liens vers des articles connexes.