Composant Composants multimédias
Un composant multimédia complexe et réactif conçu pour les interfaces finance/banque, avec une palette de couleurs Ocean/Blue et une prise en charge native du mode sombre.
HTML Code
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gradient-to-br dark:from-gray-900 dark:to-blue-950 dark:border dark:border-blue-800 rounded-xl shadow-lg overflow-hidden md:flex md:flex-row-reverse">
<!-- Right Section: Main Content / Details -->
<div class="p-6 md:w-2/3 lg:w-3/4 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Market Update</span>
<div class="flex items-center space-x-2">
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path></svg>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 11a1 1 0 011-1h3a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4 15a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight">
Navigating Volatility: Key Insights for Q3 Investment
</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
Our latest analysis delves into the market trends and economic indicators shaping the investment landscape for the third quarter. Understand the potential risks and opportunities.
</p>
<div class="flex items-center space-x-3 mb-6">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Dr. Evelyn Reed</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Chief Economist, Global Wealth Bank</p>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="flex-1 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
Read Full Report
</button>
<button class="flex-1 border border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 font-bold py-3 px-6 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
Watch Video Summary
</button>
</div>
</div>
<!-- Left Section: Image / Media -->
<div class="md:w-1/3 lg:w-1/4 relative overflow-hidden">
<img class="w-full h-48 md:h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1020/800/1200" alt="Financial Data Graphics">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent dark:from-blue-900/80 dark:via-blue-900/40 dark:to-transparent flex items-end justify-start p-6">
<div class="bg-blue-800/80 dark:bg-blue-700/80 text-white text-xs font-semibold px-3 py-1 rounded-full backdrop-blur-sm">
Video Available
</div>
</div>
</div>
</div>
<!-- Related Content / Footer (Optional, for context) -->
<div class="mt-8 max-w-7xl mx-auto text-center text-gray-500 dark:text-gray-400 text-sm">
<p>Powered by Advanced Financial Analytics. © 2023 Global Wealth Bank.</p>
</div>
</div>Composants associés
Composant Composants multimédias
Un composant multimédia réactif pour les interfaces finance/banque, avec un design épuré, des tons bleus et la prise en charge du mode sombre. Comprend une zone de contenu principale avec une image, un titre, une description et un bouton d’action, ainsi qu’une liste d’articles ou d’informations connexes.
Composant Composants multimédias
Un composant multimédia réactif avec des micro-interactions avec des animations attrayantes, conçu avec Tailwind CSS. Il prend en charge le thème sombre et inclut des images et des avatars de substitution.
Industrial_Marketplace_Media_Component
Un composant multimédia simple, de style industriel, pour une place de marché, avec une image, un titre et un prix, en mettant l’accent sur les matériaux bruts et l’esthétique utilitaire. Utilise les couleurs d’automne et prend en charge le mode sombre.