Brutalisme Pastel Media Composante
Un composant médiatique simple et brutaliste avec une palette de couleurs pastel, conçu pour un blog. Réactif avec prise en charge du mode sombre.
HTML Code
<div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
<div class="p-4">
<div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
<p class="text-gray-700 text-base dark:text-gray-300">
This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
</p>
<div class="mt-4 flex items-center">
<img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Date</p>
</div>
</div>
</div>
</div>Composants associés
Bauhaus_E-commerce_Media_Component
Un composant multimédia de commerce électronique réactif et fonctionnel avec un design monochrome inspiré du Bauhaus, une prise en charge du mode sombre, mettant l’accent sur les formes géométriques et une hiérarchie visuelle claire pour la présentation des produits.
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
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).