Composant multimédia rétro
Un composant multimédia réactif avec un design rétro/vintage, prend en charge le mode sombre.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300">
<img class="w-full h-48 object-cover rounded-t-lg mb-4" src="https://picsum.photos/seed/retro/600/400" alt="Retro Image">
<div class="text-gray-700 dark:text-gray-300">
<h2 class="text-xl font-bold mb-2">Retro Media Title</h2>
<p class="text-base mb-4">This is a description of the retro media component, evoking a sense of nostalgia with its vintage design and colors.</p>
<div class="flex items-center text-sm">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
<span>By John Doe</span>
<span class="ml-auto">Posted on 1995-10-26</span>
</div>
</div>
</div>Composants associés
Composant multimédia Glassmorphic
Un composant de carte multimédia réactif avec un design glassmorphism (effet verre givré) construit avec Tailwind CSS. Comprend un espace réservé à l’image (de picsum.photos) avec une icône de lecture de survol, du contenu textuel, une section d’auteur avec un avatar (à partir de randomuser.me) et des boutons d’action. Le composant prend en charge le mode sombre à l’aide des variantes CSS 'dark :' de Tailwind et est réactif sur différentes tailles d’écran. Aucun JavaScript n’est requis. Pour un effet visuel optimal, placez ce composant sur un fond contrasté. La fonctionnalité du mode sombre suppose une configuration CSS Tailwind appropriée (par exemple, 'darkMode : « class"' dans votre tailwind.config.js).
Composant multimédia minimaliste
Un composant multimédia simple, propre et réactif pour les sites Web d’entreprise, avec des couleurs bonbons/douces et la prise en charge du mode sombre.
Monospace_Developer_Media_Component
Un composant multimédia complexe, orienté vers l’éducation, avec un style de conception monospace/développeur et une palette de couleurs océan/bleu, conçu pour les plateformes d’apprentissage. Comprend la lecture multimédia, des extraits de code et des sections de contenu structuré.