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 multimédia - Crypto/Blockchain
Un composant d’intégration multimédia simple et réactif conçu pour les applications de crypto-monnaie ou de blockchain, avec des tons sépia/bruns et la prise en charge du mode sombre pour réduire la fatigue oculaire.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec un design Glassmorphism, des couleurs de terre et une prise en charge du mode sombre, conçu avec Tailwind CSS pour les cas d’utilisation des médias sociaux. Comprend un effet de verre dépoli et utilise des images/avatars de substitution.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec un style de neumorphisme, avec des couleurs vives et une interface interactive adaptée aux applications de tableau de bord.