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 rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.
Brutalist_Retro_Media_Embed_E-commerce
Un composant d’intégration multimédia complexe, réactif et de style brutaliste pour le commerce électronique, avec un contraste élevé, une palette de couleurs rétro, la prise en charge du mode sombre et de multiples éléments interactifs pour la présentation des produits.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec Skeuomorphism, à l’aide d’un schéma de couleurs monochromatique. Il comprend un lecteur vidéo, une section de transcription et des boutons de partage social. La conception prend en charge le mode sombre et est construite avec Tailwind CSS.