Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu dans le style Glassmorphism, avec des éléments interactifs pour la consommation de contenu.
HTML Code
<div class="flex flex-col items-center p-6 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 dark:bg-opacity-50 border border-white border-opacity-20 max-w-lg w-full">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white">
<div class="ml-4">
<h2 class="text-xl font-semibold text-white">John Doe</h2>
<p class="text-sm text-gray-200">Content Creator</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 rounded-lg p-4 shadow-md w-full">
<h3 class="text-lg font-bold text-white">Exciting New Developments in Technology</h3>
<iframe class="w-full h-60 mt-3 rounded-lg shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<p class="mt-2 text-white">Explore the latest trends and advancements in technology that are shaping the future. Join us as we dive deep into the innovations that are changing our world.</p>
<div class="mt-3 flex justify-between items-center">
<button class="py-2 px-4 bg-blue-500 text-white rounded-full hover:bg-blue-600">Read More</button>
<span class="text-xs text-gray-300">2 hours ago</span>
</div>
</div>
<img src="https://picsum.photos/400/200" alt="Media" class="mt-4 rounded-lg shadow-lg">
</div>Composants associés
Composant d’intégration de média skeuomorphe
Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant Media Embed réactif de style Skeuomorphique, utilisant des couleurs de couleur Terre et adapté au commerce électronique, avec prise en charge du thème sombre.
Composant d’intégration de média
Un composant d’intégration multimédia conçu avec des effets de glassmorphism, avec un design réactif adapté aux sites Web d’entreprise avec prise en charge du thème sombre.