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 conçu avec Skeuomorphism, à l’aide d’un schéma de couleurs monochromatique. Il comprend un lecteur vidéo, une section de transcription et des boutons de partage social. La conception prend en charge le mode sombre et est construite avec Tailwind CSS.
Composant d’intégration de média
Un composant multimédia d’intégration brutaliste, dynamique et complexe pour les blogs, conçu avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de média neumorphique
Un composant multimédia complexe et neumorphe aux couleurs vives, conçu pour les outils CRM/Business, présentant un lecteur vidéo, du contenu associé et des commandes interactives avec une réactivité totale et une prise en charge du mode sombre.