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
Un composant multimédia conçu dans le style brutalisme, présentant une mise en page audacieuse avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant multimédia E-commerce Simple Neumorphism
Composant multimédia de style Neumorphisme avec des tons de terre, complexité simple, pour site de commerce électronique, avec un design réactif et une prise en charge du thème sombre. Utilise picsum.photos pour les images.
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.