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.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md mx-auto bg-pink-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-2xl lg:max-w-4xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/400/300?random=1" alt="Modern business workspace">
</div>
<div class="p-4 md:p-6">
<div class="uppercase tracking-wide text-sm text-pink-500 dark:text-pink-400 font-semibold">Company News</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline transition-colors duration-300">Innovative Solutions for Future Growth</a>
<p class="mt-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">Our latest report highlights key strategies and technological advancements that are set to redefine industry standards. Discover how we're shaping tomorrow's landscape.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar">
</div>
<div class="ml-3 text-sm text-gray-600 dark:text-gray-400">
<p class="font-medium">Jane Doe</p>
<p>CEO, Tech Innovations</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Glassmorphism Composant de support pour la fabrication
Un composant multimédia réactif conçu pour les applications industrielles/manufacturières, avec des éléments translucides givrés, des couleurs neutres froides et la prise en charge du mode 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).