Industrial Accordion News Component
An industrial-style accordion component for news and journalism websites, featuring exposed elements, metallic textures, and an autumn color palette. It is responsive, designed for multiple interactive elements, and includes dark mode support.
HTML Code
<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 © 2023 Industrial News Corp.</p>
</div>
</div>
</div>Related Components
Neumorphic Accordion
A simple, responsive, and dark-mode-compatible accordion component with a neumorphic grayscale design, suitable for portfolio sections.
Bauhaus Accordion for Non-Profit
A simple, responsive accordion component designed with Bauhaus influences and a warm sunset color scheme, suitable for non-profit organizations. Includes dark mode support.
Accordion Component
Responsive Accordion Component with dark theme support, monochromatic color scheme, and microinteractions for a portfolio website.