Composant Composants multimédias
Un composant multimédia réactif avec des micro-interactions avec des animations attrayantes, conçu avec Tailwind CSS. Il prend en charge le thème sombre et inclut des images et des avatars de substitution.
HTML Code
<div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
<img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
</div>
</div>
Composants associés
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
Composant Composants multimédias
Un composant multimédia d’interface utilisateur complexe en mode sombre pour la documentation/les sites wiki, avec un schéma de couleurs arc-en-ciel dégradé. Il comprend différents types de médias tels que la vidéo, l’audio et les images avec des informations détaillées et des éléments interactifs, tous réactifs et utilisant le HTML sémantique.
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.