Composant d’intégration de média
Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.
HTML Code
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
<div class="ml-3">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<div class="mb-4">
<iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
</p>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Composants associés
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.
Composant d’intégration de média
Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.