Accordéon industriel Actualités Composant

<div class="font-sans bg-amber-50 dark:bg-stone-950 p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-orange-300 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 border-b border-stone-300 dark:border-stone-700 uppercase tracking-wide flex items-center justify-between">
      <span class="flex items-center">
        <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 013-3zm6 0a1 1 0 11-2 0V3a1 1 0 112 0v1z" clip-rule="evenodd"></path>
        </svg>
        Latest Dispatches
      </span>
      <span class="text-sm text-stone-600 dark:text-stone-400 hidden md:block">_NEWS_FEED_</span>
    </h2>

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            The Future of Renewable Energy: A Deep Dive
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[ANALYSIS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=1" alt="Renewable energy infrastructure">
            <p class="mb-4">Experts predict a global shift towards sustainable power sources, driven by technological advancements and increasing environmental concerns. We explore the latest breakthroughs in solar, wind, and geothermal technologies.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 10:30 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Jane Doe, Energy Correspondent</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Related Readings:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">The Economic Impact of Green Investments</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Challenges in Grid Modernization</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Case Study: Germany's Energiewende</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Read Full Article
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Global Markets Stabilize After Volatile Week
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[MARKET_REPORT]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=2" alt="Stock market graphs">
            <p class="mb-4">Major indices showed signs of recovery today as investor confidence slowly returns. Analysts attribute the rebound to stronger-than-expected corporate earnings reports.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 09:00 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By John Smith, Financial Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Key Economic Indicators:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Inflation Rates Update</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Unemployment Figures</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Consumer Spending Trends</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Detailed Report
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Exploration of Mars: New Discoveries Unveiled
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[SCIENCE_NEWS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=3" alt="Mars Rover image">
            <p class="mb-4">NASA's latest rover mission has sent back unprecedented data, hinting at the presence of ancient liquid water formations on the Red Planet. This could revolutionize our understanding of Martian history.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 25, 2023 - 04:00 PM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Alex Wu, Science Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Space Exploration Milestones:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Lunar Missions Reaching New Heights</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Private Sector's Role in Space</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Search for Exoplanets Update</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Explore Further
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <div class="p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 text-center text-xs sm:text-sm text-stone-600 dark:text-stone-400 border-t border-stone-300 dark:border-stone-700">
      <p>Data provided 'as is' for illustrative purposes. All rights reserved &copy; 2023 Industrial News Corp.</p>
    </div>
  </div>
</div>