Composants Intégration des médias Composant d’intégration de média

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.

Aperçu

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 neumorphique

Un composant multimédia complexe et neumorphe aux couleurs vives, conçu pour les outils CRM/Business, présentant un lecteur vidéo, du contenu associé et des commandes interactives avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir

Composant d’intégration multimédia - Crypto/Blockchain

Un composant d’intégration multimédia simple et réactif conçu pour les applications de crypto-monnaie ou de blockchain, avec des tons sépia/bruns et la prise en charge du mode sombre pour réduire la fatigue oculaire.

Ouvrir

Composant d’intégration multimédia 14

Un composant d’intégration multimédia conçu dans un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Il comprend une image, une description et un avatar de l’utilisateur.

Ouvrir