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
Composant d’intégration multimédia avec micro-interactions, effets réactifs et prise en charge du thème sombre. Pas besoin de Javascript.
Composant d’intégration de média
Un composant multimédia d’intégration brutaliste, dynamique et complexe pour les blogs, conçu avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de support de voyage Art Déco
Un composant multimédia complexe et très contrasté de style Art déco pour les sites Web de voyage et de tourisme, avec des motifs géométriques, un style luxueux et une réactivité totale avec prise en charge du mode sombre. Conçu pour afficher des destinations ou des activités de voyage avec un lecteur multimédia intégré, des détails et un appel à l’action.