Composant Composants multimédias
Un composant multimédia conçu avec le style skeuomorphism à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark theme support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1A202C;
}
}
</style>Composants associés
Composant Composants multimédias
Composant multimédia complexe et réactif pour la consommation de contenu de blog, stylisé en mode sombre avec une palette de couleurs monochromatiques. Il comprend une image, un titre, une description et un avatar de l’auteur.
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
Composants multimédias Composante 39
Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.