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
Un composant d’intégration multimédia simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia conçu pour le commerce électronique avec un style de conception 3D, une palette de couleurs complémentaire et une mise en page réactive qui prend en charge le mode sombre.
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.