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
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
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.