媒体组件 Component Component

<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. &copy; 2023 Global Wealth Bank.</p>
  </div>

</div>