Composants multimédias Composante 2
Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
<div class="p-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
</div>
</div>
Composants associés
Composant multimédia rétro
Un composant multimédia réactif avec un design rétro/vintage, prend en charge le mode sombre.
Composant multimédia Skeuomorphism
Composant multimédia inspiré du skeuomorphisme utilisant un schéma de couleurs monochromatiques et un niveau de complexité complexe, adapté à des fins de blog/contenu. Les fonctionnalités incluent la conception réactive et la prise en charge du thème sombre sans JavaScript.
Glassmorphism Media Components Component
Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS