Composant d’intégration de média
Un composant d’intégration multimédia simple et réactif à l’esthétique cyberpunk et bleu d’entreprise, conçu pour les interfaces de médias sociaux avec prise en charge du mode sombre.
HTML Code
<div class="p-4 md:p-6 lg:p-8 bg-gray-950 dark:bg-gray-950 text-blue-300 font-mono antialiased">
<div class="max-w-xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-900 dark:to-gray-800
border border-blue-800 dark:border-blue-800 transform hover:scale-[1.01] hover:shadow-blue-500/30">
<!-- Header / User Info -->
<div class="flex items-center p-4 lg:p-5 border-b border-blue-900 dark:border-blue-900">
<img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-400 object-cover mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div>
<p class="text-blue-200 text-sm md:text-base font-semibold">@NeonNomad_2077</p>
<p class="text-blue-500 text-xs mt-0.5">Sent from Cyber-Grid v3.1</p>
</div>
</div>
<!-- Embedded Media Content -->
<div class="relative pb-[56.25%] overflow-hidden bg-gray-800 dark:bg-gray-800">
<!-- Placeholder for an iframe or video element -->
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Caption / Description -->
<div class="p-4 lg:p-5 border-t border-blue-900 dark:border-blue-900">
<p class="text-blue-300 text-sm leading-relaxed mb-2">
Just uploaded the latest #CyberpunkBeat from the data-streams. Feel the pulse of the city! 🤘 Dive into the rhythm.
<span class="text-blue-500 hover:text-blue-400 cursor-pointer transition-colors duration-200">#FutureSounds #Synthwave #NeoTokyo</span>
</p>
<div class="flex justify-between items-center text-blue-400 text-xs">
<span>2.3K Likes</span>
<span>45 Comments</span>
<span>Link Shared</span>
</div>
</div>
<!-- Action Buttons (Optional) -->
<div class="flex justify-around py-3 px-4 bg-gray-850 dark:bg-gray-850 border-t border-blue-900 dark:border-blue-900">
<button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
Like
</button>
<button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Comment
</button>
<button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9 12.73 9 12c0-.73-.118-1.07-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l.676-.676M4.342 13.342C4.148 13.064 4 12.721 4 12c0-.721.148-1.064.342-1.342m0 2.684L5.018 12.018m0 0L4.342 11.342V12c0-.721.148-1.064.342-1.342m0 2.684a3 3 0 110-2.684"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.643v4.614z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11l-3 3-3-3"></path></svg>
Share
</button>
</div>
</div>
</div>Composants associés
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.
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.
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.