미디어 컴포넌트 컴포넌트

<div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16">

  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-lg overflow-hidden border border-blue-100 dark:border-blue-900">

    <!-- Header/Title Section -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Latest Financial Insights</h2>
      <p class="text-blue-100 text-sm sm:text-base">Stay updated with market trends and expert analysis.</p>
    </div>

    <div class="flex flex-col md:flex-row">

      <!-- Main Content Area -->
      <div class="w-full md:w-2/3 p-6 sm:p-8">
        <h3 class="text-xl sm:text-2xl font-semibold text-blue-800 dark:text-blue-200 mb-4">Understanding Portfolio Diversification</h3>
        
        <div class="relative w-full h-48 sm:h-64 md:h-72 lg:h-80 mb-6 rounded-lg overflow-hidden shadow-md group">
          <img src="https://picsum.photos/1200/800?random=1" alt="Financial chart showing growth" class="w-full h-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-gray-900/0 to-gray-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <p class="absolute bottom-3 left-4 text-white text-xs sm:text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300">Image source: Investing.com</p>
        </div>

        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Diversifying your investment portfolio is a cornerstone of a sound financial strategy. By spreading investments across various asset classes, industries, and geographies, you can mitigate risks and potentially enhance returns over the long term. This strategy aims to balance risk and reward by investing in different kinds of assets.
        </p>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          A well-diversified portfolio helps protect against the volatility of any single investment. For instance, if one sector performs poorly, the impact on your overall portfolio is cushioned by the positive performance of other sectors. It’s not just about stocks and bonds; diversification also involves considering real estate, commodities, and alternative investments.
        </p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-600">
          <span class="font-medium text-gray-600 dark:text-gray-300">John Doe</span>
          <span class="mx-2">•</span>
          <span>September 15, 2023</span>
          <span class="ml-auto text-blue-600 dark:text-blue-400 hover:underline cursor-pointer">#Investments</span>
        </div>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Read Full Article
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

      <!-- Sidebar/Related Content -->
      <div class="w-full md:w-1/3 border-t md:border-t-0 md:border-l border-blue-100 dark:border-blue-900 p-6 sm:p-8 bg-blue-50 dark:bg-gray-800">
        <h4 class="text-lg sm:text-xl font-semibold mb-6 text-blue-700 dark:text-blue-300">More Insights</h4>

        <ul class="space-y-6">
          <!-- Related Article 1 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=2" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">The Future of Digital Banking</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">October 1, 2023</p>
              </div>
            </a>
          </li>
          <!-- Related Article 2 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=3" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">Navigating Cryptocurrency Volatility</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">September 28, 2023</p>
              </div>
            </a>
          </li>
          <!-- Related Article 3 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=4" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">Smart Savings Strategies for Millennials</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">September 20, 2023</p>
              </div>
            </a>
          </li>
        </ul>

        <div class="mt-8">
          <h5 class="text-base font-semibold mb-3 text-blue-700 dark:text-blue-300">Subscribe to our Newsletter</h5>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Get weekly market updates directly to your inbox.</p>
          <form class="flex flex-col sm:flex-row gap-3">
            <input type="email" placeholder="Your Email Address" aria-label="Email address for newsletter" class="flex-grow px-4 py-2 rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <button type="submit" class="px-5 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              Subscribe
            </button>
          </form>
        </div>
      </div>

    </div>

    <!-- Footer (optional, for component context) -->
    <div class="p-6 sm:p-8 bg-blue-700 dark:bg-gray-900 text-blue-200 text-center text-xs sm:text-sm">
      &copy; 2023 Financial Insights Inc. All rights reserved.
    </div>

  </div>

</div>