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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-xl rounded-lg shadow-xl overflow-hidden bg-stone-200 dark:bg-stone-800 transition-colors duration-300 transform">
<!-- Header -->
<div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-300 dark:border-stone-700">
<div class="flex items-center">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-stone-700 dark:text-stone-300" 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<h3 class="ml-2 text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">Decentralized Insights</h3>
</div>
<button class="p-2 rounded-full hover:bg-stone-300 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 dark:focus:ring-offset-stone-800 dark:focus:ring-stone-600 transition-colors duration-200">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-400" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Media Placeholder -->
<div class="relative w-full overflow-hidden" style="padding-top: 56.25%;">
<!-- 16:9 Aspect Ratio -->
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Content -->
<div class="p-4 sm:p-5">
<h4 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">Understanding Bitcoin Halving: A Deep Dive</h4>
<p class="text-sm sm:text-base text-stone-700 dark:text-stone-300 mb-4">
Explore the mechanisms and historical impact of Bitcoin halving events on its supply, scarcity, and market dynamics.
Essential knowledge for every crypto enthusiast.
</p>
<div class="flex items-center text-sm sm:text-base text-stone-600 dark:text-stone-400">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-stone-400 dark:border-stone-600">
<div>
<span class="font-medium text-stone-700 dark:text-stone-300">Crypto Insights Hub</span>
<span class="block text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Published 2 days ago</span>
</div>
</div>
</div>
<!-- Footer/Actions -->
<div class="p-4 sm:p-5 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between">
<button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-brown-700 dark:hover:text-brown-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-400 dark:focus:ring-offset-stone-800 dark:focus:ring-brown-600 transition-colors duration-200">
<svg class="w-5 h-5 sm:w-6 sm:h-6 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>
<span class="text-sm sm:text-base">Like</span>
</button>
<button class="px-4 py-2 bg-amber-700 dark:bg-amber-600 text-white rounded-md text-sm sm:text-base font-semibold shadow-md hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
Share to DApp
</button>
</div>
</div>
</div>Composants associés
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.
Composant d’intégration de média
Un composant multimédia complexe et réactif pour la consommation de blog/contenu, avec un design organique/inspiré de la nature, des tons de bijoux et la prise en charge du mode sombre. Comprend un lecteur vidéo, le contenu de l’article et les médias associés.
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.